/* * Landing de servicio — estilos propios. * Se carga solo en las paginas que usan template-landing-servicio.php. * * SISTEMA, NO VALORES SUELTOS * --------------------------- * Los tamanos y las distancias salen de dos escalas cerradas, declaradas como * tokens en style.css. Para cambiar el ritmo de todas las landings se tocan * esos valores y nada mas. * * PALETA NUEVA (18/09/2026) * ------------------------- * El manual de marca que paso Santi cambia el acento: sale el celeste #3fa9f5 * y entra el azul acero #42808c, con un azul palido y un neutro nuevos. Los * valores estan en style.css. Aqui no hay ningun hex: todo sale de los tokens, * asi que la paleta se cambia en un solo lugar. * * LA REGLA QUE ORDENA TODO (Claudio, 18/09/2026) * --------------------------------------------- * Se replica la MAQUETACION, se estandariza el DISENO. Cuantas columnas, que * iconos, que alineacion y que imagenes lleva cada seccion se copia de la * pagina original. Los tamanos, los interlineados, los espaciados y los colores * salen de la escala. Si el original usa una medida que no esta en la escala, * gana la escala. * * El hero sigue cambiando en los tres tramos medidos sobre el original. Esos * tres valores tienen token propio (--sk-hero-aire) y no entran en la escala de * ritmo a proposito: son la altura que hay que dejarle al header transparente, * no una distancia de diseno. * escritorio (>1024px) 220px de aire arriba, 248px a la derecha del titulo * tablet (768-1024px) 300px de aire arriba, 72px a los lados * movil (<768px) 180px de aire arriba, 20px a los lados * * REGLA: ningun px suelto dentro de una regla. Si el valor que hace falta no * esta en la escala, la discusion es si la escala tiene que cambiar. Las * excepciones vivas estan comentadas en su linea, una por una. */ .sk-landing { /* * Los tokens del sistema (color, tipografia, espaciado, cajas) viven en * style.css, en :root, porque el header y el pie tambien los usan. Aqui * quedan solo los que son propios de esta plantilla. */ /* * Aire del hero. No entra en la escala de ritmo a proposito: es la altura * que hay que dejarle al header transparente y cambia por tramo. Sale de * medir la pagina actual. */ --sk-hero-aire: 180px; --sk-hero-lateral: var( --sk-gutter ); --sk-titulo-aire-derecha: 0; /* Iconos de los sellos: dos tamanos, como la tipografia. */ --sk-icono: 36px; --sk-seccion: var( --sk-e-9 ); } .sk-contenedor { box-sizing: border-box; margin: 0 auto; max-width: var( --sk-ancho ); padding-left: var( --sk-gutter ); padding-right: var( --sk-gutter ); width: 100%; } /* =========================================================================== * BOTONES * * Tres variantes y ninguna mas: sobre foto (hero), sobre fondo claro (cuerpo) * y sobre banda oscura. Todas en MAYUSCULAS, que es como va la marca desde el * 18/09/2026. Cada una tiene su version de linea para la accion secundaria: * la del cuerpo (sk-boton-linea) y, desde el 02/10/2026, la del hero * (sk-boton--secundario). * * Las reglas del cuerpo llevan .sk-landing delante a proposito: Astra pinta * los botones de bloque con `.wp-block-button .wp-block-button__link` en su * CSS en linea, y con solo .sk-cuerpo la especificidad empata. En el CSS * combinado de LiteSpeed (visita de invitado) el tema queda antes y gana * Astra: los botones salian azul acero. Con una clase de mas, el orden da igual. * ======================================================================== */ .sk-landing .sk-boton, .sk-landing .sk-cuerpo .wp-block-button__link { border: 0; border-radius: var( --sk-radio-boton ); display: inline-block; font-family: var( --sk-tipo-cuerpo ); font-size: var( --sk-fs-cuerpo ); font-weight: var( --sk-peso-medio ); /* Un poco de aire entre letras: en mayusculas, sin el, se apelmazan. */ letter-spacing: 0.04em; line-height: 1; padding: var( --sk-e-4 ) var( --sk-e-8 ); text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color var( --sk-transicion ), color var( --sk-transicion ); } /* Sobre la foto del hero manda la regla de fondo oscuro: neutro. */ .sk-landing .sk-boton { background: var( --sk-neutro ); color: var( --sk-marino ); } .sk-landing .sk-boton:hover, .sk-landing .sk-boton:focus-visible { background: var( --sk-blanco ); color: var( --sk-marino ); } .sk-landing a:focus-visible, .sk-landing .sk-boton:focus-visible, .sk-landing .sk-cuerpo .wp-block-button__link:focus-visible { outline: 3px solid var( --sk-azul ); outline-offset: var( --sk-e-1 ); } /* * Sobre fondo claro el CTA va en MARINO, que es el azul de la marca. El azul * acero es color de icono, no de boton. */ .sk-landing .sk-cuerpo .wp-block-button__link { background: var( --sk-marino ); color: var( --sk-texto-invertido ); } .sk-landing .sk-cuerpo .wp-block-button__link:hover, .sk-landing .sk-cuerpo .wp-block-button__link:focus, .sk-landing .sk-cuerpo .wp-block-button__link:focus-visible { background: var( --sk-marino-claro ); color: var( --sk-texto-invertido ); } /* Sobre banda oscura, neutro con letra marino: 15,5:1. */ .sk-landing .sk-cuerpo .sk-seccion--oscura .wp-block-button__link { background: var( --sk-neutro ); color: var( --sk-marino ); } .sk-landing .sk-cuerpo .sk-seccion--oscura .wp-block-button__link:hover, .sk-landing .sk-cuerpo .sk-seccion--oscura .wp-block-button__link:focus, .sk-landing .sk-cuerpo .sk-seccion--oscura .wp-block-button__link:focus-visible { background: var( --sk-blanco ); color: var( --sk-marino ); } /* Boton de linea: accion secundaria, para el "Descubre mas". */ .sk-landing .sk-cuerpo .sk-boton-linea .wp-block-button__link { background: transparent; box-shadow: inset 0 0 0 1px var( --sk-marino ); color: var( --sk-marino ); } .sk-landing .sk-cuerpo .sk-boton-linea .wp-block-button__link:hover, .sk-landing .sk-cuerpo .sk-boton-linea .wp-block-button__link:focus, .sk-landing .sk-cuerpo .sk-boton-linea .wp-block-button__link:focus-visible { background: var( --sk-azul-tenue ); color: var( --sk-marino ); } /* * Segundo boton del hero (869f6wdm2): de linea, en neutro sobre la foto. Es la * misma regla de fondo oscuro que el principal, sin relleno, para que se lea * como la segunda puerta y no compita con la primera. Al pasar por encima se * rellena con el neutro, igual que el principal. */ .sk-landing .sk-boton--secundario { background: transparent; box-shadow: inset 0 0 0 1px var( --sk-neutro ); color: var( --sk-neutro ); } .sk-landing .sk-boton--secundario:hover, .sk-landing .sk-boton--secundario:focus-visible { background: var( --sk-neutro ); color: var( --sk-marino ); } /* =========================================================================== * HERO * ======================================================================== */ .sk-hero { background-color: var( --sk-marino ); background-position: center center; background-repeat: no-repeat; background-size: cover; /* * La sombra que separa el hero de la primera seccion. Es la union mas * mirada de la pagina y sin ella las dos zonas se tocan a hueso. El * z-index es para que la sombra caiga sobre lo que sigue, no por debajo. */ box-shadow: var( --sk-sombra-3 ); color: var( --sk-texto-invertido ); position: relative; z-index: 1; } /* * El velo es lo que vuelve legible el titulo sobre la foto: la misma capa de * marino al 82% que usa la pagina actual. Sin foto no hace falta, el fondo ya * es liso. */ .sk-hero__velo { display: none; } .sk-hero--con-foto .sk-hero__velo { background: var( --sk-marino ); display: block; inset: 0; opacity: var( --sk-velo ); position: absolute; } .sk-hero__contenido { padding-bottom: var( --sk-e-8 ); padding-left: var( --sk-hero-lateral ); padding-right: var( --sk-hero-lateral ); padding-top: var( --sk-hero-aire ); position: relative; } .sk-landing .sk-hero__antetitulo { color: var( --sk-texto-invertido ); font-family: var( --sk-tipo-titulos ); font-size: var( --sk-fs-cuerpo ); font-weight: var( --sk-peso-cuerpo ); letter-spacing: 0.04em; line-height: var( --sk-lh-etiqueta ); margin: 0 0 var( --sk-e-4 ); text-transform: uppercase; } .sk-landing .sk-hero__titulo { color: var( --sk-texto-invertido ); font-family: var( --sk-tipo-titulos ); font-size: var( --sk-fs-display ); font-weight: var( --sk-peso-titulo ); line-height: var( --sk-lh-display ); margin: 0 0 var( --sk-e-6 ); padding-right: var( --sk-titulo-aire-derecha ); } .sk-hero__bajada { color: var( --sk-texto-invertido ); font-family: var( --sk-tipo-cuerpo ); font-size: var( --sk-fs-cuerpo ); line-height: var( --sk-lh-cuerpo ); margin: 0 0 var( --sk-e-7 ); max-width: var( --sk-ancho-bajada ); } /* * Los dos botones del hero, en fila y con su hueco de la escala. El contenedor * solo existe cuando hay segundo boton: con uno, el boton va suelto como * siempre y el ritmo del hero no se mueve. En movil, si no entran en una * linea, el segundo baja. */ .sk-hero__botones { display: flex; flex-wrap: wrap; gap: var( --sk-e-4 ); } /* Los tres sellos, dentro del hero ---------------------------------------- */ .sk-sellos { display: grid; gap: var( --sk-e-2 ); grid-template-columns: repeat( 3, 1fr ); margin-top: var( --sk-e-9 ); } .sk-sellos__item { text-align: center; } .sk-sellos__icono { color: var( --sk-texto-invertido ); display: inline-block; font-size: var( --sk-icono ); line-height: 1; } .sk-landing .sk-sellos__texto { color: var( --sk-texto-invertido ); font-family: var( --sk-tipo-titulos ); font-size: var( --sk-fs-etiqueta ); font-weight: var( --sk-peso-medio ); line-height: var( --sk-lh-etiqueta ); margin: var( --sk-e-4 ) 0 0; } /* =========================================================================== * CUERPO: REJILLA DE TRES CARRILES * * El cuerpo alterna secciones sobre blanco con bandas oscuras a todo el ancho * de la ventana. Para que una banda pueda romper el contenedor sin recurrir a * 100vw —que en escritorio incluye la barra de desplazamiento y produce scroll * lateral, justo lo que hay que evitar— el contenedor del cuerpo es una * rejilla de tres carriles: los de los costados absorben el aire y el del * medio tiene el ancho util del contenedor. * ======================================================================== */ .sk-cuerpo { padding-bottom: 0; padding-top: 0; } .sk-cuerpo > .sk-contenedor { display: grid; grid-template-columns: 1fr min( var( --sk-ancho ) - var( --sk-gutter ) * 2, 100% - var( --sk-gutter ) * 2 ) 1fr; max-width: none; padding-left: 0; padding-right: 0; } .sk-cuerpo > .sk-contenedor > * { grid-column: 2; min-width: 0; } .sk-cuerpo > .sk-contenedor > .sk-seccion--ancha, .sk-cuerpo > .sk-contenedor > .sk-seccion--oscura { grid-column: 1 / -1; } /* * EL CONTENEDOR QUE WORDPRESS VUELVE A METER * * Como el tema no trae theme.json, WordPress envuelve el contenido de cada * grupo en un "wp-block-group__inner-container" al pintarlo. Ese div no esta * en lo que se guarda, no se ve en el editor y aparece solo en el HTML * servido, asi que hereda lo que se le ponga al grupo y estrecha todo lo que * cuelga de una seccion. * * Con display: contents desaparece del calculo de la pagina y los bloques * vuelven a comportarse como hijos directos de su seccion. Es un div sin * semantica, asi que sacarlo del arbol no le quita nada a un lector de * pantalla. En los selectores de abajo hay que seguir nombrandolo, porque en * el DOM sigue estando. */ .sk-cuerpo .wp-block-group__inner-container { display: contents; } /* * Cada seccion del cuerpo es un grupo con la clase "sk-seccion". El aire * vertical lo pone la seccion, no los bloques de adentro. */ .sk-cuerpo .sk-seccion { padding-bottom: var( --sk-seccion ); padding-top: var( --sk-seccion ); } /* Una seccion que continua a la anterior y no abre aire propio arriba. */ .sk-cuerpo .sk-seccion--pegada { padding-top: 0; } .sk-cuerpo .sk-seccion__interior { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: var( --sk-ancho ); padding-left: var( --sk-gutter ); padding-right: var( --sk-gutter ); width: 100%; } /* La imagen a todo el ancho no lleva aire propio: la imagen es la seccion. */ .sk-cuerpo .sk-seccion--ancha { padding-bottom: 0; padding-top: 0; } /* * Lo mismo para la seccion que es solo una imagen dentro del contenedor. El * aire que la separa de lo de arriba y lo de abajo ya lo ponen las secciones * vecinas con el suyo; si ademas pone el propio, el corte queda con el doble * de blanco que cualquier otro de la pagina. La referencia es la distancia * entre el final de una seccion clara y el comienzo de la banda oscura: una * sola unidad de aire, no dos. */ .sk-cuerpo .sk-seccion:has( > .wp-block-group__inner-container > .sk-imagen-ancha ) { padding-bottom: 0; padding-top: 0; } /* Banda oscura ------------------------------------------------------------ * Degradado de marino en vez de color plano: a lo ancho de la ventana, un * marino liso se ve muerto. */ .sk-cuerpo .sk-seccion--oscura { background: var( --sk-degradado-oscuro ); } /* * Banda oscura sobre foto. Es un bloque "Cubierta" de WordPress, que es el * bloque nativo para foto con velo y texto encima, asi que se arma desde el * editor sin tocar codigo. Lo unico que se le impone es el velo del sistema, * porque el bloque solo deja elegir opacidades de diez en diez. */ .sk-cuerpo .sk-seccion--foto { background: var( --sk-marino ); display: block; min-height: 0; padding-left: 0; padding-right: 0; } .sk-cuerpo .sk-seccion--foto .wp-block-cover__background { opacity: var( --sk-velo ); } .sk-cuerpo .sk-seccion--foto .wp-block-cover__inner-container { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: var( --sk-ancho ); padding-left: var( --sk-gutter ); padding-right: var( --sk-gutter ); width: 100%; } /* * EL TEXTO DE LAS BANDAS OSCURAS * * Astra pinta los parrafos de cualquier bloque Cubierta con su gris global, y * lo hace con "body .wp-block-cover:not(.has-text-color.has-link-color) p", * que son tres clases y dos elementos. Desde que los testimonios y el cierre * viven dentro de Cubiertas, esa regla le ganaba a la del sistema y el texto * salia gris oscuro sobre foto oscura: ilegible. * * Se nombra la seccion con sus DOS clases para pasarle por encima por * especificidad, sin recurrir a !important. */ .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura h2, .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura h3, .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura p, .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura li, .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura cite { color: var( --sk-texto-invertido ); } .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura p a, .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura li a { color: var( --sk-neutro ); } .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura p a:hover, .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura li a:hover { color: var( --sk-blanco ); } /* * Ancho de lectura acotado y alineado a la izquierda: centrarlo lo desalineaba * del hero, que arranca en el borde izquierdo del contenedor. Se limita solo * el texto corrido; las piezas que por naturaleza son anchas quedan sueltas. */ .sk-cuerpo :is( .sk-seccion, .sk-seccion__interior, .wp-block-cover__inner-container, .wp-block-group__inner-container ) > :is( p, ul, ol, h2, h3 ) { max-width: var( --sk-ancho-lectura ); } .sk-cuerpo :is( .sk-seccion, .sk-seccion__interior, .wp-block-cover__inner-container, .wp-block-group__inner-container ) > *:last-child { margin-bottom: 0; } /* Tipografia del cuerpo --------------------------------------------------- */ .sk-landing .sk-cuerpo h2 { color: var( --sk-texto-fuerte ); font-family: var( --sk-tipo-titulos ); font-size: var( --sk-fs-titulo ); line-height: var( --sk-lh-titulo ); margin: 0 0 var( --sk-e-6 ); } .sk-landing .sk-cuerpo h3 { color: var( --sk-texto-fuerte ); font-family: var( --sk-tipo-titulos ); font-size: var( --sk-fs-subtitulo ); line-height: var( --sk-lh-subtitulo ); margin: 0 0 var( --sk-e-4 ); } .sk-cuerpo p, .sk-cuerpo li { color: var( --sk-texto ); font-size: var( --sk-fs-cuerpo ); line-height: var( --sk-lh-cuerpo ); } .sk-cuerpo p { margin: 0 0 var( --sk-e-6 ); } /* * La negrita del cuerpo. Lato solo trae 400 y 700 como pesos reales, asi que * un 600 lo simularia el navegador engordando el 400 y saldria sucio: se usa * el 700, que en Lato a 17px es una negrita discreta. */ .sk-cuerpo strong, .sk-cuerpo b { font-weight: var( --sk-peso-titulo ); } /* * Astra le pone a las listas un margen izquierdo de unos 46px que, sumado a la * sangria de los topos, las desplaza 66px respecto del texto. En un telefono de * 375px eso se come un sexto del ancho. Se deja solo la sangria de los topos. */ .sk-cuerpo ul, .sk-cuerpo ol { margin: 0 0 var( --sk-e-6 ); padding-left: 1.25em; } .sk-cuerpo li + li { margin-top: var( --sk-e-2 ); } /* =========================================================================== * FORMULARIO * * La seccion va sobre BLANCO: el fondo de color suave que tenia competia con * la caja y ensuciaba el cierre de la pagina. Lo que separa el formulario del * resto es la tarjeta, con su filete y una sombra corta. * ======================================================================== */ /* * Sin aire propio, por lo mismo que la seccion de la imagen: el que hay que * dejar ya lo ponen la seccion de arriba y la de abajo. Con el suyo encima, el * formulario quedaba flotando en el doble de blanco que el resto. */ .sk-formulario { background: var( --sk-fondo ); padding-bottom: 0; padding-top: 0; scroll-margin-top: var( --sk-e-10 ); } /* * La tarjeta va sin filete: lo que la separa del blanco de la seccion es el * color del fondo mas la sombra. Con filete y fondo blanco quedaba un recuadro * dentro de otro y no se entendia que separaba que. * * El fondo es EL MISMO que el interior de los campos de HubSpot. Antes era el * marino diluido al 6%, que daba un gris apenas mas oscuro: dos grises casi * iguales pero no iguales, que es el peor de los casos, porque se lee como un * error de impresion en cada borde de campo. Con un solo gris, la caja es una * superficie y los campos se distinguen por su filete, que es su trabajo. * * Sin degradado a proposito: lo que levanta la tarjeta del blanco es la * sombra, que es la misma escala que usa el resto del sitio. Un degradado * haria variar el fondo a lo largo de la caja y volveria imposible que * coincida con el color plano de los campos, que es justo lo que se busca. */ .sk-formulario__caja { background: var( --sk-superficie-campo ); border: 0; border-radius: var( --sk-radio ); box-shadow: var( --sk-sombra-3 ); padding: var( --sk-e-8 ) var( --sk-gutter ); } .sk-landing .sk-formulario__titulo { font-size: var( --sk-fs-titulo ); line-height: var( --sk-lh-titulo ); margin: 0 0 var( --sk-e-4 ); } .sk-formulario__bajada { color: var( --sk-texto ); font-size: var( --sk-fs-cuerpo ); line-height: var( --sk-lh-cuerpo ); margin: 0; } /* * El formulario lo pinta HubSpot dentro de un iframe del mismo origen, asi que * desde aqui solo se puede gobernar la caja. El estilo de los campos se toca en * el editor de formularios de HubSpot, no en esta hoja. */ .sk-formulario__embed { min-height: 320px; /* alto de reserva del iframe, evita el salto de carga */ } .sk-formulario__embed iframe { border: 0; width: 100% !important; } /* =========================================================================== * COMPONENTES DEL CUERPO * * Se estilan los bloques nativos de WordPress, no clases inventadas. Eso * importa para poder delegar: el contenido se arma con el editor de siempre y * sale con el sistema puesto. * ======================================================================== */ /* Testimonios — bloque "Cita" ---------------------------------------------- */ .sk-cuerpo blockquote, .sk-cuerpo .wp-block-quote { background: var( --sk-superficie ); border-left: 4px solid var( --sk-azul ); border-radius: 0 var( --sk-radio ) var( --sk-radio ) 0; margin: 0 0 var( --sk-e-8 ); padding: var( --sk-e-6 ); } .sk-cuerpo blockquote p { color: var( --sk-texto-fuerte ); /* Astra pone las citas en cursiva; el original va en redonda. */ font-size: var( --sk-fs-cuerpo ); font-style: normal; line-height: var( --sk-lh-cuerpo ); margin: 0 0 var( --sk-e-4 ); } .sk-cuerpo blockquote p:last-child { margin-bottom: 0; } .sk-cuerpo blockquote cite, .sk-cuerpo .wp-block-quote__citation { color: var( --sk-texto-suave ); display: block; font-size: var( --sk-fs-etiqueta ); font-style: normal; font-weight: var( --sk-peso-medio ); } /* * Sobre la banda oscura la cita no lleva caja: el fondo ya la separa, y una * caja clara sobre marino se lee como un parche. Queda el filete, que es lo * que la marca como cita. */ .sk-cuerpo .sk-seccion--oscura blockquote, .sk-cuerpo .sk-seccion--oscura .wp-block-quote { background: transparent; border-left-color: var( --sk-neutro ); padding: 0 0 0 var( --sk-e-6 ); } .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura blockquote cite { color: var( --sk-azul-palido ); } /* * La caja de la garantia no ocupa todo el ancho: a 1130px el sello queda * perdido a la izquierda y el texto se estira. Siete decimos del contenedor * la dejan a la medida de lo que dice. */ @media ( min-width: 768px ) { .sk-cuerpo .sk-caja { max-width: 70%; } /* * El sello ocupa tres decimos y el texto los siete restantes. Con las dos * columnas al cincuenta el sello quedaba enorme al lado de cuatro lineas * de texto. */ .sk-cuerpo .sk-caja .sk-dos-columnas { display: grid; grid-template-columns: 3fr 7fr; } } /* Estrellas de valoracion -------------------------------------------------- * Cinco estrellas dibujadas con texto, no con imagenes. El "Valorado con 5 de * 5" va en un span que solo leen los lectores de pantalla: el dibujo solo no * dice nada a quien no lo ve, y ese texto esta en la checklist de conservacion. * * El selector nombra la banda oscura a proposito: sin eso, la regla que pinta * de blanco los parrafos de la banda le ganaba y las estrellas salian blancas. */ .sk-cuerpo .sk-estrellas, .sk-landing .sk-cuerpo .sk-seccion.sk-seccion--oscura .sk-estrellas { color: var( --sk-estrella ); font-size: var( --sk-fs-cuerpo ); letter-spacing: var( --sk-e-1 ); line-height: 1; margin: 0 0 var( --sk-e-3 ); } .sk-cuerpo .sk-solo-lectores { border: 0; clip-path: inset( 50% ); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* Preguntas frecuentes — bloque "Detalles" -------------------------------- * El acordeon nativo de WordPress (details/summary) reemplaza al de Elementor: * el contenido esta en el HTML desde el principio, funciona sin JavaScript y * responde al teclado sin programar nada. */ .sk-cuerpo .wp-block-details { border-bottom: 1px solid var( --sk-linea ); padding: var( --sk-e-4 ) 0; } /* * La pregunta va en la tipografia de CUERPO, no en la de titulos. Montserrat * abre mucho entre letras y, a diez preguntas seguidas, la seccion se leia * como si fuera de otra pagina. */ .sk-cuerpo .wp-block-details summary { color: var( --sk-texto-fuerte ); cursor: pointer; font-family: var( --sk-tipo-cuerpo ); font-size: var( --sk-fs-cuerpo ); font-weight: var( --sk-peso-titulo ); line-height: var( --sk-lh-cuerpo ); list-style: none; padding-right: var( --sk-e-7 ); position: relative; } /* La flecha por defecto no se puede estilar, asi que se dibuja una propia. */ .sk-cuerpo .wp-block-details summary::-webkit-details-marker { display: none; } .sk-cuerpo .wp-block-details summary::after { border-bottom: 2px solid var( --sk-azul ); border-right: 2px solid var( --sk-azul ); content: ''; /* 8px es el tamano del dibujo de la flecha, no una distancia de ritmo. */ height: 8px; position: absolute; right: var( --sk-e-2 ); top: 50%; transform: translateY( -70% ) rotate( 45deg ); transition: transform var( --sk-transicion ); width: 8px; } .sk-cuerpo .wp-block-details[open] summary::after { transform: translateY( -30% ) rotate( -135deg ); } .sk-cuerpo .wp-block-details summary:focus-visible { outline: 3px solid var( --sk-azul ); outline-offset: var( --sk-e-1 ); } .sk-cuerpo .wp-block-details > *:not( summary ) { margin-top: var( --sk-e-3 ); } .sk-cuerpo .wp-block-details p, .sk-cuerpo .wp-block-details li { font-size: var( --sk-fs-etiqueta ); } /* Galeria de trabajos ------------------------------------------------------ */ .sk-cuerpo .wp-block-gallery { gap: var( --sk-e-4 ); margin: 0 0 var( --sk-e-8 ); } .sk-cuerpo .wp-block-gallery img, .sk-cuerpo .wp-block-image img { border-radius: var( --sk-radio ); height: auto; max-width: 100%; } /* * La foto se acerca al pasar el cursor, como en la pagina actual. El recorte * lo hace la figura, asi que la imagen crece por dentro y no empuja la * cuadricula. Se anima solo la transformacion, que no obliga al navegador a * recalcular la pagina entera. */ .sk-cuerpo .wp-block-gallery .wp-block-image { border-radius: var( --sk-radio ); overflow: hidden; } .sk-cuerpo .wp-block-gallery .wp-block-image img { border-radius: 0; transition: transform 0.4s ease; } .sk-cuerpo .wp-block-gallery .wp-block-image:hover img, .sk-cuerpo .wp-block-gallery .wp-block-image:focus-within img { transform: scale( 1.07 ); } .sk-cuerpo .wp-block-image { margin: 0 0 var( --sk-e-8 ); } .sk-cuerpo figcaption { color: var( --sk-texto-suave ); font-size: var( --sk-fs-etiqueta ); line-height: var( --sk-lh-etiqueta ); margin-top: var( --sk-e-3 ); } /* Columnas ---------------------------------------------------------------- */ .sk-cuerpo .wp-block-columns { gap: var( --sk-e-8 ); margin: 0 0 var( --sk-e-8 ); max-width: 100%; } .sk-cuerpo .wp-block-column > * { max-width: 100%; } .sk-cuerpo .wp-block-buttons { margin: 0 0 var( --sk-e-6 ); } /* Enlaces dentro del texto ------------------------------------------------- */ .sk-cuerpo p a, .sk-cuerpo li a { color: var( --sk-marino ); text-decoration: underline; /* Separacion del subrayado: detalle tipografico, no ritmo. */ text-underline-offset: 2px; } .sk-cuerpo p a:hover, .sk-cuerpo li a:hover { color: var( --sk-marino ); } /* Linea de WhatsApp, con su icono a la izquierda --------------------------- * El icono va como texto en linea y no como caja flexible a proposito: asi la * linea sigue centrandose o alineandose a la izquierda segun donde este, sin * una regla por cada contexto. * * El verde es el de WhatsApp, no el del sistema: es una marca ajena y se * reconoce por el color. Es la unica excepcion a la paleta en toda la hoja. */ .sk-cuerpo .sk-whatsapp__icono { color: #25d366; font-size: 1.25em; margin-right: var( --sk-e-2 ); vertical-align: -0.15em; } /* * HubSpot le quita el href al enlace para abrir su pop-up (WEB-47), y un * enlace sin href pierde la manito. Se la devuelve esto. */ .sk-cuerpo .sk-whatsapp .hs-cta-trigger-button { cursor: pointer; } /* Tablas ------------------------------------------------------------------- */ .sk-cuerpo .wp-block-table { margin: 0 0 var( --sk-e-8 ); } .sk-cuerpo table { border-collapse: collapse; font-size: var( --sk-fs-cuerpo ); width: 100%; } .sk-cuerpo th, .sk-cuerpo td { border-bottom: 1px solid var( --sk-linea ); padding: var( --sk-e-3 ) var( --sk-e-4 ); text-align: left; } .sk-cuerpo th { color: var( --sk-texto-fuerte ); font-family: var( --sk-tipo-titulos ); font-weight: var( --sk-peso-medio ); } /* Separador ---------------------------------------------------------------- */ .sk-cuerpo .wp-block-separator { border: 0; border-top: 1px solid var( --sk-linea ); margin: var( --sk-e-9 ) 0; } /* =========================================================================== * PATRONES DE SECCION * ======================================================================== */ /* Seccion centrada --------------------------------------------------------- */ .sk-cuerpo .sk-centrado { text-align: center; } .sk-cuerpo .sk-centrado > *, .sk-cuerpo .sk-centrado > .wp-block-group__inner-container > * { margin-left: auto; margin-right: auto; } .sk-cuerpo .sk-centrado p { max-width: 62ch; } .sk-landing .sk-cuerpo .sk-centrado h2 { max-width: 20ch; } /* Fila de tarjetas con icono ----------------------------------------------- */ .sk-cuerpo .sk-tarjetas { gap: var( --sk-e-8 ); } .sk-cuerpo .sk-tarjetas .wp-block-column { text-align: center; } /* * Variante "juntas": la fila se acota al ancho de lectura en vez de estirarse * al contenedor. Tres iconos repartidos en 1130px quedan sueltos y no se leen * como un grupo. */ .sk-cuerpo .sk-tarjetas--juntas { margin-left: auto; margin-right: auto; max-width: var( --sk-ancho-lectura ); } .sk-cuerpo .sk-tarjeta__icono { color: var( --sk-azul ); display: block; font-size: 50px; /* tamano del dibujo del icono, no una distancia */ line-height: 1; margin-bottom: var( --sk-e-4 ); } .sk-landing .sk-cuerpo .sk-tarjeta__titulo { color: var( --sk-texto-fuerte ); font-family: var( --sk-tipo-titulos ); font-size: var( --sk-fs-cuerpo-lg ); font-weight: var( --sk-peso-titulo ); line-height: var( --sk-lh-cuerpo-lg ); margin: 0 0 var( --sk-e-2 ); max-width: none; } .sk-cuerpo .sk-tarjetas p:not( .sk-tarjeta__titulo ) { color: var( --sk-texto ); font-size: var( --sk-fs-etiqueta ); line-height: var( --sk-lh-cuerpo ); margin: 0; max-width: none; } .sk-cuerpo .sk-seccion--oscura .sk-tarjeta__titulo, .sk-cuerpo .sk-seccion--oscura .sk-tarjetas p { color: var( --sk-texto-invertido ); } /* Los tres pasos ----------------------------------------------------------- * Cinco piezas en una rejilla con areas: el bloque de texto, los tres pasos y * el boton. En escritorio el boton cae debajo del texto, en la primera * columna, que es mas ancha que las otras tres. En movil todo se apila y el * boton queda al final, que es donde sirve: despues de leer los tres pasos. */ .sk-cuerpo .sk-pasos { display: grid; gap: var( --sk-e-7 ); grid-template-areas: 'texto' 'uno' 'dos' 'tres' 'boton'; grid-template-columns: 1fr; } .sk-cuerpo .sk-pasos > .wp-block-column:nth-child( 1 ) { grid-area: texto; } .sk-cuerpo .sk-pasos > .wp-block-column:nth-child( 2 ) { grid-area: uno; } .sk-cuerpo .sk-pasos > .wp-block-column:nth-child( 3 ) { grid-area: dos; } .sk-cuerpo .sk-pasos > .wp-block-column:nth-child( 4 ) { grid-area: tres; } .sk-cuerpo .sk-pasos > .wp-block-column:nth-child( 5 ) { grid-area: boton; } .sk-cuerpo .sk-pasos .wp-block-column { text-align: left; } .sk-cuerpo .sk-paso__numero { align-items: center; background: var( --sk-neutro ); border-radius: 50%; color: var( --sk-marino ); display: flex; font-family: var( --sk-tipo-titulos ); font-size: var( --sk-fs-subtitulo ); font-weight: var( --sk-peso-titulo ); height: var( --sk-e-9 ); justify-content: center; margin: 0 0 var( --sk-e-4 ); width: var( --sk-e-9 ); } /* Lista con check ---------------------------------------------------------- * Reemplaza el topo por un check azul. El icono viene de Font Awesome, que el * sitio ya carga. */ .sk-cuerpo .sk-lista-check { list-style: none; padding-left: 0; } .sk-cuerpo .sk-lista-check li { padding-left: var( --sk-e-7 ); position: relative; } .sk-cuerpo .sk-lista-check li::before { color: var( --sk-azul ); content: '\f00c'; /* fa-check */ font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome'; font-weight: 900; left: 0; position: absolute; top: 0; } .sk-cuerpo .sk-seccion--oscura .sk-lista-check li::before { color: var( --sk-neutro ); } /* Variante con la linea en negrita, como en la pagina actual. */ .sk-cuerpo .sk-lista-check--fuerte li { color: var( --sk-texto-fuerte ); font-weight: var( --sk-peso-titulo ); } .sk-cuerpo .sk-seccion--oscura .sk-lista-check--fuerte li { color: var( --sk-texto-invertido ); } /* Contadores --------------------------------------------------------------- */ .sk-cuerpo .sk-contadores { gap: var( --sk-e-6 ); } .sk-cuerpo .sk-contadores .wp-block-column { text-align: center; } /* * Una cifra no parte linea nunca. Partida deja de ser un numero y pasa a ser * dos: "+6000" en dos renglones se lee "+600" y "0". Si algun dia no entra, * que se salga un poco de su columna, que es un defecto mucho menor. */ .sk-landing .sk-cuerpo .sk-contador__cifra { color: var( --sk-marino ); font-family: var( --sk-tipo-titulos ); font-size: var( --sk-fs-titulo ); font-weight: var( --sk-peso-titulo ); line-height: var( --sk-lh-titulo ); margin: 0 0 var( --sk-e-1 ); max-width: none; white-space: nowrap; } .sk-cuerpo .sk-contador__etiqueta { color: var( --sk-texto-fuerte ); font-family: var( --sk-tipo-titulos ); font-size: var( --sk-fs-etiqueta ); font-weight: var( --sk-peso-medio ); letter-spacing: 0.04em; line-height: var( --sk-lh-etiqueta ); margin: 0; max-width: none; text-transform: uppercase; } /* Desfile de logos --------------------------------------------------------- * Los logos pasan en una cinta continua en vez de una cuadricula. Con quince * marcas, la cuadricula ocupaba media pantalla en el telefono y obligaba a * elegir cuales sacar. * * El JavaScript duplica la cinta para que el giro no tenga costura y recien * ahi le pone la clase "--listo". Sin JavaScript queda una tira que se * arrastra con el dedo, que sigue siendo utilizable. */ .sk-cuerpo .sk-muro-logos { overflow-x: auto; scrollbar-width: none; } .sk-cuerpo .sk-muro-logos::-webkit-scrollbar { display: none; } .sk-cuerpo .sk-muro-logos .wp-block-group__inner-container, .sk-cuerpo .sk-muro-logos__carril { align-items: center; display: flex; gap: var( --sk-e-8 ); width: max-content; } .sk-cuerpo .sk-muro-logos .wp-block-image { margin: 0; } /* * Alto fijo y ancho con tope. Sin el tope, un logo muy apaisado como el de * Bimba y Lola —nueve veces mas ancho que alto— ocupaba cuatrocientos pixeles * el solo y se comia la cinta. Con object-fit el logo entra en la caja sin * deformarse: los apaisados bajan de alto en vez de estirarse. */ .sk-cuerpo .sk-muro-logos img { border-radius: 0; filter: saturate( 0 ); height: var( --sk-e-8 ); max-width: calc( var( --sk-e-10 ) + var( --sk-e-8 ) ); object-fit: contain; opacity: 0.75; transition: opacity var( --sk-transicion ); width: auto; } .sk-cuerpo .sk-muro-logos img:hover { opacity: 1; } /* Con la cinta duplicada, ya puede girar sola. */ .sk-cuerpo .sk-muro-logos--listo { /* El desvanecido de los bordes evita que los logos entren y salgan de golpe. */ -webkit-mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 94%, transparent ); mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 94%, transparent ); overflow: hidden; } /* * Se anima el CARRIL, que contiene las dos copias. Si se animara tambien cada * copia, cada una correria por su cuenta y los logos se montarian unos sobre * otros. */ .sk-cuerpo .sk-muro-logos--listo .sk-muro-logos__carril { animation: sk-desfile 48s linear infinite; } .sk-cuerpo .sk-muro-logos--listo:hover .sk-muro-logos__carril { animation-play-state: paused; } @keyframes sk-desfile { from { transform: translateX( 0 ); } to { transform: translateX( calc( -50% - var( --sk-e-8 ) / 2 ) ); } } /* Sello --------------------------------------------------------------------- * Imagen que se muestra a su tamano en vez de estirarse a la columna. El * limite son dos pasos de 96 de la escala, no un numero suelto. */ .sk-cuerpo .sk-sello { margin: 0; } .sk-cuerpo .sk-sello img { max-width: calc( var( --sk-e-10 ) * 2 ); width: auto; } /* El sello de la garantia va mas chico que el resto de las imagenes. */ .sk-cuerpo .sk-sello--garantia img { max-width: calc( var( --sk-e-10 ) + var( --sk-e-8 ) ); } /* Imagen ancha ------------------------------------------------------------- */ .sk-cuerpo .sk-imagen-ancha { margin: 0; max-width: 100%; } .sk-cuerpo .sk-imagen-ancha img { border-radius: var( --sk-radio ); width: 100%; } .sk-cuerpo .sk-seccion--ancha .sk-imagen-ancha img { border-radius: 0; display: block; } /* Dos columnas de texto e imagen ------------------------------------------- */ .sk-cuerpo .sk-dos-columnas { align-items: center; gap: var( --sk-e-9 ); } .sk-cuerpo .sk-dos-columnas .wp-block-image { margin: 0; } /* Preguntas frecuentes en dos columnas ------------------------------------- */ .sk-cuerpo .sk-faq { align-items: stretch; gap: var( --sk-e-9 ); } .sk-cuerpo .sk-faq__portada { border-radius: var( --sk-radio ); min-height: 100%; overflow: hidden; padding: var( --sk-e-8 ); } .sk-cuerpo .sk-faq__portada .wp-block-cover__background { opacity: var( --sk-velo ); } /* * El parrafo de la portada tiene que ser blanco. La regla general del cuerpo * lo pintaba gris oscuro sobre la foto y no se leia. */ .sk-landing .sk-cuerpo .wp-block-cover.sk-faq__portada h2, .sk-landing .sk-cuerpo .wp-block-cover.sk-faq__portada p, .sk-landing .sk-cuerpo .wp-block-cover.sk-faq__portada p a { color: var( --sk-texto-invertido ); } .sk-cuerpo .sk-faq__portada > *:last-child { margin-bottom: 0; } /* Caja con borde ------------------------------------------------------------ */ .sk-cuerpo .sk-caja { border: 1px solid var( --sk-linea ); border-radius: var( --sk-radio ); box-shadow: var( --sk-sombra-1 ); margin-bottom: var( --sk-e-8 ); padding: var( --sk-e-8 ); } .sk-cuerpo .sk-caja .wp-block-columns { margin-bottom: 0; } /* Seccion sobre fondo claro ------------------------------------------------- */ .sk-cuerpo .sk-bloque-claro { background: var( --sk-superficie ); border-radius: var( --sk-radio ); max-width: 100%; padding: var( --sk-e-8 ); } /* Texto a la izquierda dentro de una seccion centrada ----------------------- */ .sk-cuerpo .sk-texto-izquierda { text-align: left; } /* Los testimonios, en dos columnas ------------------------------------------ */ .sk-cuerpo .sk-testimonios { gap: var( --sk-e-8 ); } .sk-cuerpo .sk-testimonios blockquote:last-child { margin-bottom: 0; } /* =========================================================================== * TRAMOS * ======================================================================== */ @media ( max-width: 767px ) { .sk-cuerpo .sk-testimonios, .sk-cuerpo .sk-dos-columnas, .sk-cuerpo .sk-faq { gap: var( --sk-e-7 ); } .sk-cuerpo .sk-bloque-claro, .sk-cuerpo .sk-caja { padding: var( --sk-e-6 ); } /* * En movil la imagen de una fila de dos columnas va primero, como en la * pagina original: la foto presenta y el texto explica. */ .sk-cuerpo .sk-dos-columnas { display: flex; flex-direction: column; } /* * Las tarjetas con icono van de a dos, no de a una. Apiladas, la seccion * de "Nuestros clientes disfrutan de" se hacia interminable. */ .sk-cuerpo .sk-tarjetas:not( .sk-pasos ) { display: grid; gap: var( --sk-e-7 ); grid-template-columns: repeat( 2, 1fr ); } /* * Y cuando una seccion trae DOS filas de tarjetas —seis en total— las dos * filas se arman como una sola rejilla. Si cada fila decide por su cuenta, * tres tarjetas en dos columnas dejan una suelta, y la seccion sale 2+1, * 2+1 en vez de 2+2+2: es lo que pasaba en "Nuestros clientes disfrutan * de...", donde los iconos salian de a dos, de a uno y de a dos. * * Las filas salen del calculo con display: contents y sus tarjetas pasan a * ser hijas de la seccion. El titulo y el parrafo, que no son tarjetas, * ocupan la fila entera. */ .sk-cuerpo .sk-seccion:has( .sk-tarjetas + .sk-tarjetas ) { display: grid; gap: var( --sk-e-7 ); grid-template-columns: repeat( 2, 1fr ); } .sk-cuerpo .sk-seccion:has( .sk-tarjetas + .sk-tarjetas ) .sk-tarjetas { display: contents; } .sk-cuerpo .sk-seccion:has( .sk-tarjetas + .sk-tarjetas ) > .wp-block-group__inner-container > :not( .sk-tarjetas ) { grid-column: 1 / -1; margin-bottom: 0; } /* * Los tres puntos de dolor si van de a tres: son cuatro palabras cada uno * y en dos columnas quedaba uno suelto abajo. */ /* * Dos clases y no una: la regla de arriba lleva un :not(), que cuenta como * clase, asi que con una sola esta perdia y los tres puntos de dolor * salian de a dos. */ .sk-cuerpo .sk-tarjetas.sk-tarjetas--juntas { gap: var( --sk-e-4 ); grid-template-columns: repeat( 3, 1fr ); } .sk-cuerpo .sk-tarjetas--juntas .sk-tarjeta__icono { font-size: var( --sk-e-7 ); } .sk-landing .sk-cuerpo .sk-tarjetas--juntas .sk-tarjeta__titulo { font-size: var( --sk-fs-etiqueta ); line-height: var( --sk-lh-etiqueta ); } /* * Pero si las tarjetas traen texto ademas del titulo (WEB-59: dicen que se * hace y que recibe el cliente), de a tres quedan columnas de dos palabras * por linea. Entonces van una debajo de la otra, con el icono a la * izquierda del titulo y el texto, que es como se lee una lista. */ .sk-cuerpo .sk-tarjetas.sk-tarjetas--juntas:has( p:not( .sk-tarjeta__titulo ) ) { gap: var( --sk-e-6 ); grid-template-columns: 1fr; text-align: left; } .sk-cuerpo .sk-tarjetas--juntas:has( p:not( .sk-tarjeta__titulo ) ) .wp-block-column { align-items: start; column-gap: var( --sk-e-4 ); display: grid; /* Columna fija para el icono: cada dibujo tiene su ancho, y el texto * tiene que arrancar en la misma vertical en las tres tarjetas. */ grid-template-columns: var( --sk-e-8 ) 1fr; text-align: left; } .sk-cuerpo .sk-tarjetas--juntas:has( p:not( .sk-tarjeta__titulo ) ) .sk-tarjeta__icono { grid-row: 1 / span 2; justify-self: center; margin: 0; } .sk-landing .sk-cuerpo .sk-tarjetas--juntas:has( p:not( .sk-tarjeta__titulo ) ) .sk-tarjeta__titulo { font-size: var( --sk-fs-cuerpo ); line-height: var( --sk-lh-cuerpo ); margin: 0; } /* * Todos los botones al centro. En una sola columna no hay nada a los lados * que justifique alinear a la izquierda, y con la mitad centrados y la otra * mitad no, la pagina se lee desprolija. En escritorio se respeta lo que * diga cada bloque: ahi el de los pasos va bajo su columna de texto y tiene * que quedar a la izquierda. */ .sk-cuerpo .wp-block-buttons { justify-content: center; } /* * En una sola columna el formulario queda pegado a la bajada: en escritorio * son dos columnas y los separa el espacio entre ellas, pero apilados no * hay nada en el medio y el primer campo arranca contra el punto final. */ .sk-formulario__embed { margin-top: var( --sk-e-7 ); } /* * Los pasos: el numero a la izquierda y el texto a su derecha, no apilados. * Con el circulo encima de cada titulo, los tres pasos ocupaban una pantalla * entera de columna y el ojo tenia que bajar tres veces para leer tres * frases cortas. * * El circulo ocupa las dos filas de su paso, asi que queda a la altura del * titulo y de la descripcion, no colgado del titulo. */ .sk-cuerpo .sk-pasos > .wp-block-column:has( > .sk-paso__numero ) { align-items: start; column-gap: var( --sk-e-4 ); display: grid; grid-template-columns: auto 1fr; row-gap: var( --sk-e-2 ); text-align: left; } .sk-cuerpo .sk-pasos > .wp-block-column > .sk-paso__numero { grid-row: 1 / span 2; height: var( --sk-e-8 ); margin: 0; width: var( --sk-e-8 ); } .sk-landing .sk-cuerpo .sk-pasos > .wp-block-column > .sk-tarjeta__titulo { margin-bottom: 0; } /* Las tres cifras entran en paralelo si se achican un punto. */ .sk-cuerpo .sk-contadores { display: grid; gap: var( --sk-e-3 ); grid-template-columns: repeat( 3, 1fr ); } /* * Y la cifra baja un escalon de la escala. Tres columnas en un telefono son * 91 px cada una en una pantalla de 360, y "+6000" a 30 px mide 98: no * entraba por siete pixeles y se partia en dos renglones. A 24 mide 79 y * entra con aire hasta en una pantalla de 320. */ .sk-landing .sk-cuerpo .sk-contador__cifra { font-size: var( --sk-fs-subtitulo ); line-height: var( --sk-lh-subtitulo ); } .sk-cuerpo .sk-contador__etiqueta { font-size: var( --sk-e-3 ); } /* El sello de Habitissimo, centrado y mas chico. */ .sk-cuerpo .sk-sello { text-align: center; } .sk-cuerpo .sk-sello img { max-width: var( --sk-e-10 ); } /* * La foto que separa el problema de la solucion se recorta mas alta: a lo * ancho del telefono, su proporcion original la dejaba en una tira. */ .sk-cuerpo .sk-imagen-ancha img { aspect-ratio: 4 / 3; object-fit: cover; } } /* * Las fotos de los testimonios son imagenes de archivo genericas y no aportan * nada: no van en ningun ancho. */ .sk-cuerpo .sk-testimonio__foto { display: none; } @media ( min-width: 768px ) { .sk-landing { --sk-icono: 60px; --sk-seccion: var( --sk-e-10 ); --sk-hero-aire: 300px; --sk-hero-lateral: 72px; } .sk-hero__bajada { font-size: var( --sk-fs-cuerpo-lg ); } .sk-sellos { gap: var( --sk-e-6 ); } .sk-formulario__caja { align-items: start; column-gap: var( --sk-e-9 ); display: grid; grid-template-columns: 1fr 1.6fr; padding: var( --sk-e-8 ); } .sk-formulario__texto { max-width: var( --sk-ancho-bajada ); } /* * Los pasos: la primera columna es la mas ancha porque lleva el titulo, la * bajada y el boton; las otras tres se reparten el resto. El boton cae * debajo del texto, en su misma columna. */ .sk-cuerpo .sk-pasos { grid-template-areas: 'texto uno dos tres' 'boton uno dos tres'; grid-template-columns: 1.7fr 1fr 1fr 1fr; grid-template-rows: auto 1fr; } .sk-cuerpo .sk-pasos > .wp-block-column:nth-child( 5 ) { align-self: start; } } @media ( min-width: 1025px ) { .sk-landing { --sk-hero-aire: 220px; --sk-hero-lateral: var( --sk-gutter ); --sk-titulo-aire-derecha: 248px; } } @media ( prefers-reduced-motion: reduce ) { .sk-landing * { transition: none !important; } /* Quien pidio menos movimiento recibe la tira quieta, no el desfile. */ .sk-cuerpo .sk-muro-logos--listo { overflow-x: auto; } .sk-cuerpo .sk-muro-logos--listo .sk-muro-logos__carril { animation: none; } } /* Fichas ------------------------------------------------------------------- * Fila de tarjetas con icono, titulo, texto y lista. No es un patron nuevo de * cero: es `sk-caja` —que ya trae borde, radio, sombra y relleno— puesta * dentro de columnas. Lo unico que hace falta es soltarle el ancho maximo, * pensado para una caja suelta y centrada, y darle altura completa para que * tres fichas de texto distinto terminen a la misma altura. */ .sk-cuerpo .sk-fichas { gap: var( --sk-e-6 ); } .sk-cuerpo .sk-fichas .wp-block-column { display: flex; } .sk-cuerpo .sk-fichas .wp-block-column > .sk-caja { margin-bottom: 0; max-width: none; width: 100%; } .sk-cuerpo .sk-fichas .sk-caja .sk-tarjeta__icono { font-size: 36px; /* tamano del dibujo del icono, no una distancia */ margin-bottom: var( --sk-e-5 ); } .sk-landing .sk-cuerpo .sk-fichas .sk-caja h3 { font-size: var( --sk-fs-cuerpo-lg ); line-height: var( --sk-lh-cuerpo-lg ); margin: 0 0 var( --sk-e-4 ); } .sk-cuerpo .sk-fichas .sk-caja :is( p, ul ) { max-width: none; } .sk-cuerpo .sk-fichas .sk-caja ul { margin-bottom: 0; } @media ( max-width: 781px ) { .sk-cuerpo .sk-fichas .wp-block-column + .wp-block-column { margin-top: var( --sk-e-6 ); } } /* Rejilla de imagen con pie ------------------------------------------------- * Para los ocho materiales y para el antes y despues. Las dos son lo mismo: * una foto con su nombre debajo. Lo que cambia es cuantas entran por fila, y * eso se dice con la clase, no con una regla por seccion. * * El pie va pegado a su foto: el hueco de 48px que `wp-block-image` trae por * defecto es separacion entre bloques, no entre una imagen y su propio pie, * y a esa distancia el nombre deja de leerse como parte de la foto. */ .sk-cuerpo :is( .sk-materiales, .sk-galeria ) .wp-block-image { margin-bottom: var( --sk-e-3 ); } .sk-cuerpo :is( .sk-materiales, .sk-galeria ) .sk-tarjeta__titulo { margin-bottom: 0; } /* Ocho materiales: cuatro por fila en escritorio y en tablet, dos en movil. */ @media ( max-width: 767px ) { .sk-cuerpo .sk-materiales { display: grid; gap: var( --sk-e-6 ); grid-template-columns: repeat( 2, 1fr ); } } @media ( min-width: 768px ) and ( max-width: 781px ) { .sk-cuerpo .sk-materiales { display: grid; gap: var( --sk-e-6 ); grid-template-columns: repeat( 4, 1fr ); } .sk-cuerpo .sk-materiales .wp-block-column { flex-basis: auto !important; /* gana al 100% que el nucleo pone en este tramo */ } } /* Antes y despues: tres por fila en escritorio, dos en tablet y una en movil. * De a dos en un telefono, cada foto queda en 85px por mitad y el antes y el * despues dejan de distinguirse, que es lo unico que la seccion tiene que * hacer. */ @media ( max-width: 767px ) { /* * Una sola columna. Va con las dos clases y no con una: la regla de * `sk-tarjetas` lleva un :not(), que cuenta como clase, y con una sola * esta perdia y las fotos salian de a dos. */ .sk-cuerpo .sk-tarjetas.sk-galeria { display: grid; gap: var( --sk-e-7 ); grid-template-columns: 1fr; } } @media ( min-width: 768px ) and ( max-width: 1024px ) { .sk-cuerpo .sk-galeria { display: grid; gap: var( --sk-e-7 ); grid-template-columns: repeat( 2, 1fr ); } .sk-cuerpo .sk-galeria .wp-block-column { flex-basis: auto !important; } } /* Imagen ancha: un alto y no dos --------------------------------------------- * `sk-imagen-ancha` respetaba la proporcion del archivo, asi que una foto * 16:9 salia un 50% mas alta que una 2,65:1 y las dos landings quedaban con * ritmos distintos. La proporcion la fija el sistema y la foto se recorta: * una imagen de corte tiene que medir lo mismo en todas las paginas. * * El valor es el de la foto de `/final-obra/`, que es la que ya estaba * aprobada: 1920x724, o sea 426px de alto en el contenedor de 1130. */ .sk-cuerpo .sk-imagen-ancha img { aspect-ratio: 1920 / 724; object-fit: cover; } /* Aire despues del muro de logos -------------------------------------------- * Cuando la cinta cierra la seccion no hace falta, y la regla de ultimo hijo * ya se lo quita. Cuando la sigue un boton, sin esto el boton se le monta * encima. */ .sk-cuerpo .sk-muro-logos { margin-bottom: var( --sk-e-8 ); } /* Tarjetas con texto, alineadas ------------------------------------------- * Cuando las tarjetas del problema traen texto (WEB-59), un titulo de una * linea al lado de uno de dos deja los textos a distintas alturas. El titulo * reserva dos lineas y se apoya abajo, asi los textos arrancan parejos. En * movil no hace falta: van una debajo de la otra. */ @media ( min-width: 768px ) { .sk-landing .sk-cuerpo .sk-tarjetas--juntas:has( p:not( .sk-tarjeta__titulo ) ) .sk-tarjeta__titulo { align-items: flex-end; display: flex; justify-content: center; min-height: calc( var( --sk-fs-cuerpo-lg ) * var( --sk-lh-cuerpo-lg ) * 2 ); } } /* * Titulos sin palabra suelta: "Que vas a tener con / nosotros" se leia como * un descuido. El navegador reparte las lineas parejas; donde no lo soporta, * corta como siempre. */ .sk-landing .sk-cuerpo h2, .sk-landing .sk-hero__titulo, .sk-landing .sk-cuerpo .sk-tarjeta__titulo { text-wrap: balance; } /* Y en los parrafos, que la ultima linea no quede con una sola palabra * (tambien la bajada del hero: "...fuera del horario de / clases." a 390). */ .sk-cuerpo p, .sk-landing .sk-hero__bajada { text-wrap: pretty; } /* Franja de aviso de empleo (SEO-25) ---------------------------------------- * Va encima del formulario en /hospitales/ y /colegios/ de Argentina. Antes * llevaba los colores de aviso escritos en linea en el bloque: un naranja * fuera de la paleta, justo entre el boton y el formulario. Ahora es una * clase con los tokens del sistema: un aviso chico y centrado sobre la * tarjeta del formulario (en la rejilla, el margen automatico lo ajusta a su * texto). */ .sk-landing .sk-cuerpo .sk-aviso-empleo { background: var( --sk-azul-tenue ); border-radius: var( --sk-radio ); color: var( --sk-texto ); font-size: var( --sk-fs-etiqueta ); margin: var( --sk-e-8 ) auto var( --sk-e-5 ); max-width: none; padding: var( --sk-e-3 ) var( --sk-e-5 ); text-align: center; } .sk-landing .sk-cuerpo .sk-aviso-empleo a { color: var( --sk-marino ); font-weight: var( --sk-peso-titulo ); } /* Un telefono no se parte en dos lineas: deja de leerse como un numero. */ .sk-cuerpo a[href^="tel:"] { white-space: nowrap; } /* Desplegable de texto (WEB-58) ---------------------------------------------- * El texto que se conserva por SEO (SEO-25, SEO-37 y el protegido de cada * pagina) no queda a la vista como un bloque largo: se ven sus tres primeras * lineas, que se desvanecen, y un boton "Leer mas" que lo abre entero. El texto * completo esta siempre en el HTML, asi que el buscador lo lee igual. * * Es un grupo de WordPress con la clase "sk-desplegable": se edita como * cualquier parrafo. El boton va en el HTML, justo despues del grupo (lo pone * armar-landing-ar.py), y landing-servicio.js lo conecta. Va en el HTML y no lo * crea el script por dos motivos: el UCSS de LiteSpeed poda las reglas de lo * que no encuentra en el HTML, y un boton que aparece al primer gesto empuja * la pagina. Si un grupo no trae boton, el script lo crea igual. * * EL RECORTE ES DEL CSS, NO DEL SCRIPT. En el sitio argentino LiteSpeed demora * el JavaScript del tema hasta que el visitante mueve el mouse o hace scroll. * Si el recorte lo pusiera el script, la pagina cargaria con el texto entero y * se encogeria al primer scroll: un salto de diseno que Google cuenta. Asi el * texto nace recortado y el script solo suma el boton. Sin JavaScript, el *