/* Theme Name: SynLokahi Theme URI: https://synlokahi.com Description: Tema hijo de GeneratePress para SynLokahi (Sophie Wolf). La paleta, la tipografia y la escala de espaciado se definen en theme.json. Author: Sants Web Design Author URI: https://santswebdesign.com Template: generatepress Version: 1.6.0 Text Domain: synlokahi */ /*-------------------------------------------------------------- # 0 · Devolverle el mando a theme.json --------------------------------------------------------------*/ /* * POR QUE HACE FALTA ESTE BLOQUE. WordPress imprime los estilos globales de * theme.json con el selector `body` a secas —especificidad 0,0,1— y * GeneratePress imprime su CSS dinamico DESPUES en el documento, con la misma * especificidad. Gana por orden, no por peso, asi que sin esto la web sale con * la tipografia del sistema y los colores del tema padre aunque theme.json * este bien escrito. Medido en la pagina, no supuesto. * * Ninguna regla de aqui inventa un valor: todas leen las variables que genera * theme.json, asi que la marca se sigue cambiando en un unico sitio. */ body, button, input, select, textarea { font-family: var(--wp--preset--font-family--texto); } body { background-color: var(--wp--preset--color--arena-clara); color: var(--wp--preset--color--tinta); font-size: var(--wp--preset--font-size--base); line-height: 1.7; } h1, h2, h3, h4 { font-family: var(--wp--preset--font-family--titulos); font-weight: 500; color: var(--wp--preset--color--tinta); } h1 { font-size: var(--wp--preset--font-size--titulo-1); line-height: 1.12; letter-spacing: -0.015em; } h2 { font-size: var(--wp--preset--font-size--titulo-2); line-height: 1.18; letter-spacing: -0.01em; } h3 { font-size: var(--wp--preset--font-size--titulo-3); line-height: 1.28; } h4 { font-size: var(--wp--preset--font-size--entradilla); line-height: 1.35; } /* Los botones. El :not() respeta los que llevan color propio puesto desde el editor, que es como se monta el boton claro sobre fondo laguna. POR QUE LLEVAN `.wp-block-button` DELANTE, 02/09/2026. Sin ese trozo los botones de la web salian GRISES, #55555E, y no en laguna. No era un fallo del theme.json: GeneratePress emite en su CSS dinamico a.wp-block-button__link:not(.has-background) { background-color: #55555E } que pesa (0,2,1). La regla de aqui pesaba (0,2,0) y perdia POR UN ELEMENTO. Anadiendo el contenedor sube a (0,3,0) y gana sin necesidad de !important. Se via en las tres llamadas a la accion de la portada, en las paginas de servicio y en el hero. */ .wp-block-button a.wp-block-button__link:not(.has-background) { background-color: var(--wp--preset--color--laguna); } .wp-block-button a.wp-block-button__link:not(.has-text-color) { color: var(--wp--preset--color--arena-clara); } .wp-block-button__link { font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--pequeno); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .wp-block-button a.wp-block-button__link:not(.has-background):hover, .wp-block-button a.wp-block-button__link:not(.has-background):focus { background-color: var(--wp--preset--color--laguna-oscura); } .wp-block-button__link.has-background:hover, .wp-block-button__link.has-background:focus { background-color: var(--wp--preset--color--blanco); } /*-------------------------------------------------------------- # 1 · Base --------------------------------------------------------------*/ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Los titulares se equilibran solos. `balance` solo actua hasta seis lineas en Chromium y diez en Firefox, asi que no se aplica a parrafos. */ h1, h2, h3 { text-wrap: balance; margin-bottom: var(--wp--preset--spacing--30); /* * El aleman encadena palabras muy largas y GeneratePress hereda * `overflow-wrap: break-word`, que las parte por donde sea y sin guion. * En un titular queda fatal. Con `hyphens: auto` el navegador parte por * silabas usando el diccionario del idioma declarado en `lang` —que aqui * es correcto en los cuatro— y el corte bruto queda solo como ultimo * recurso, para que nunca se salga nada de la caja. */ hyphens: auto; } h4, h5, h6 { margin-bottom: var(--wp--preset--spacing--20); } /*-------------------------------------------------------------- # 2 · Foco visible y salto al contenido --------------------------------------------------------------*/ :focus-visible { outline: 3px solid var(--wp--preset--color--coral); outline-offset: 3px; border-radius: 2px; } /* Navegadores sin :focus-visible siguen mostrando el foco clasico. */ :focus:not(:focus-visible) { outline: none; } /*-------------------------------------------------------------- # 3 · Estructura de pagina a ancho completo --------------------------------------------------------------*/ /* GeneratePress saca los bloques .alignfull con margenes de 100vw, y 100vw incluye la barra de desplazamiento: eso provoca scroll horizontal en escritorio. Con la plantilla a ancho completo el contenedor ya ocupa todo, asi que se anulan esos margenes en lugar de compensarlos. */ .full-width-content .entry-content .alignfull { margin-left: 0; margin-right: 0; width: auto; max-width: none; } .full-width-content .entry-content > * { margin-block: 0; } .full-width-content .site-content, .full-width-content .inside-article, .full-width-content .entry-content { padding: 0; } /* Una seccion nunca desborda de lado. */ body { overflow-x: clip; } /*-------------------------------------------------------------- # 4 · Secciones --------------------------------------------------------------*/ /* ESCALA DE AIRE, CUATRO NIVELES. Antes las 38 secciones del sitio llevaban exactamente 64 px arriba y 64 abajo, medido. Una banda de 236 px y una biografia de 1.227 px recibian el mismo aire, asi que al bajar por la pagina no habia respiracion, habia metronomo. El espacio es jerarquia igual que lo es el cuerpo de letra. apertura · la banda que abre una pagina interior estandar · el resto compacta · paneles de servicio y avisos, que son datos, no discurso cierre · la llamada final, que tiene que pesar mas que una seccion normal */ .syn-seccion { padding-block: var(--wp--preset--spacing--60); padding-inline: var(--wp--preset--spacing--70); } /* APERTURA. Solo cuando la seccion es lo primero de la pagina — en la portada lo primero es el heroe, que no es `.syn-seccion` y conserva su propio aire. */ .entry-content > .syn-seccion:first-child { padding-block: clamp(3.5rem, 7vw, 6.5rem); } /* CIERRE. Se reconoce por el fondo laguna, no por la posicion, porque en Kahi Loa la llamada esta a mitad de pagina y en contacto no es la ultima seccion. */ .syn-seccion.has-laguna-background-color { padding-block: clamp(3rem, 6vw, 5.5rem); } /* HOLGADA. El nivel mas generoso de la escala, para el bloque principal de una pagina. Lo usa «Ablauf & Vorbereitung» en la de reserva, que es fotografia mas lista y quedaba apretado entre la banda salvia y la llamada verde. Subido el 04/09 de 6rem a 7,5 — de 96 px a 120 a partir de 1600, y de 94 a 118 a 1440. Ahora respira mas que la propia banda de apertura, y es deliberado: la apertura es un titular y una linea, esto es el contenido de la pagina. El relleno es simetrico, asi que el aire de arriba y el de abajo son siempre el mismo numero. */ .syn-seccion--holgada { padding-block: clamp(4rem, 8vw, 7.5rem); } /* LA ENTRADA DE UNA SECCION SE CENTRA CON SU TITULAR. Un titular centrado con una linea suelta debajo, pegada a la izquierda, queda descolgado. Se ve en «Konzepte & Hintergrunde» de Kahi Loa, donde ese parrafo no es cuerpo: presenta las cuatro tarjetas que vienen justo debajo. SE RECONOCE POR LO QUE VIENE DESPUES, NO POR SU LONGITUD, porque el CSS no sabe cuantas lineas ocupa un parrafo. Un parrafo seguido de una rejilla o de una fila de botones es una ENTRADA y se centra. Uno seguido de otro parrafo, o que cierra la seccion, es CUERPO y se lee alineado a la izquierda. Y por eso las legales no se tocan. Sus parrafos miden dos lineas igual que este, pero son cuerpo — van seguidos de otro parrafo o terminan la seccion. El ancho se acota al de texto porque una linea centrada de 1.180 px no se lee, y `balance` reparte las dos lineas en vez de dejar una corta debajo. Aqui si sirve `balance` y no `pretty`, al reves que en la entradilla: alli habia un caso de mas de seis lineas y aqui son una o dos por definicion. EL `:not(.has-text-align-center)` NO SOBRA. Sin el, la regla tambien acotaba a 680 px los parrafos de las llamadas finales de Reiki y de Precios, que ya venian centrados desde el contenido y nadie habia pedido tocar. Esta regla arregla lo que cuelga a la izquierda y no toca lo que ya estaba decidido. Censo del 07/09/2026 sobre las 24 paginas: un caso por idioma, cuatro en total, mas los que traiga el contenido nuevo. */ .syn-seccion :is(h1, h2, h3).has-text-align-center + p:not(.has-text-align-center):has(+ .syn-rejilla), .syn-seccion :is(h1, h2, h3).has-text-align-center + p:not(.has-text-align-center):has(+ .wp-block-buttons) { max-width: var(--wp--style--global--content-size); margin-inline: auto; text-align: center; text-wrap: balance; } /* EL SANGRADO DE LAS LISTAS NO SE ARREGLA AQUI, y conviene dejarlo escrito. Estuvo un rato en esta hoja, acotado a una seccion, y era un apano. El sitio correcto es `theme.json`, en `styles.blocks.core/list`, porque el bloque de lista declara `spacing.margin` y `spacing.padding` entre sus soportes —comprobado en `wp-includes/blocks/list/block.json`— y porque WordPress lo emite como `:root :where(.wp-block-list)`, que pesa (0,1,0) y le gana al `ol,ul{margin:0 0 1.5em 3em}` que GeneratePress trae en `main.min.css`, de peso (0,0,1). Ademas asi se ve igual en el editor y la clienta lo puede cambiar desde el panel de espaciado. */ /* COMPACTA. Los datos practicos de la sesion y el descargo legal no son discurso, y con 64 px arriba y abajo pedian la misma atencion que la biografia de Sophie. */ .syn-seccion--compacta, .syn-seccion.syn-datos { padding-block: clamp(2rem, 4vw, 3rem); } /* Red de seguridad del contraste sobre los dos verdes. El 03/09/2026 veintidos de las treinta y seis secciones con fondo verde tenian el texto en tinta, que sobre laguna da 2:1. El criterio 1.4.3 de la WCAG exige 4,5:1 en texto normal y 3:1 en texto grande, que es 24 px o 18,5 px en negrita. Se leia fatal y ademas incumplia. El fallo venia de poner el color de FONDO del bloque y olvidar el del TEXTO, que es exactamente lo que hace cualquiera desde el editor. Asi que no basta con arreglar los bloques de hoy: si Sophie elige «laguna» de fondo manana le vuelve a pasar, y no tiene por que saberlo. Aqui el claro es el valor por defecto de esos dos fondos. Un color que ella ponga a mano sigue ganando, porque WordPress lo saca con la clase .has-...-color y entonces este selector ya no aplica. */ .has-laguna-background-color:not(.has-text-color), .has-laguna-oscura-background-color:not(.has-text-color) { color: var(--wp--preset--color--arena-clara); } .has-laguna-background-color:not(.has-text-color) :where(h1, h2, h3, h4, h5, h6, p, li, cite, strong, em), .has-laguna-oscura-background-color:not(.has-text-color) :where(h1, h2, h3, h4, h5, h6, p, li, cite, strong, em) { color: inherit; } /* Una seccion que contiene SOLO una fotografia y que va detras de otra del MISMO color de fondo no se lee como dos bandas, se lee como una sola. Y los rellenos de las dos se suman. Medido en Chakra y en Kahi Loa: encima de la foto quedaban 88 px de la seccion anterior mas 56 de esta, 144 en total y todos del mismo arena. Debajo, en cambio, solo 56 antes de que cambiara el color. Los dos huecos median lo mismo contando el relleno de la seccion siguiente, pero A LA VISTA el de arriba era casi el triple, porque el de abajo lo parte el cambio de fondo. Es un caso en el que medir la caja no basta y hay que mirar el color. Se quita el relleno de arriba, que ya lo pone la seccion anterior, y se sube el de abajo hasta igualarlo. Resultado: 88 y 88 del mismo color. */ .syn-seccion.has-arena-background-color + .syn-seccion--compacta.has-arena-background-color:has(> .wp-block-image:only-child), .syn-seccion.has-arena-clara-background-color + .syn-seccion--compacta.has-arena-clara-background-color:has(> .wp-block-image:only-child) { padding-block-start: 0; padding-block-end: var(--wp--preset--spacing--60); } /* Y LO MISMO POR DEBAJO DE LA FOTO. El caso de Chakra y Kahi Loa: la seccion de la foto y la del texto que sigue son las dos arena clara, o sea la misma banda a la vista, y sus rellenos se sumaban — 48 de la foto mas 64 del texto, 112 px de hueco dentro de un color continuo. Medido a 1296. Se quita el de la foto y se deja el de la seccion siguiente, que ya es el aire normal entre secciones. Quedan 64. La foto pasa a tener 48 por arriba y 64 por abajo dentro de su banda, que es lo que toca: debajo va el texto. */ .syn-seccion--compacta:has(> .wp-block-image:only-child).has-arena-background-color + .syn-seccion.has-arena-background-color, .syn-seccion--compacta:has(> .wp-block-image:only-child).has-arena-clara-background-color + .syn-seccion.has-arena-clara-background-color { /* el hueco lo pone esta, la de arriba lo quita */ padding-block-start: var(--wp--preset--spacing--60); } .syn-seccion--compacta:has(> .wp-block-image:only-child).has-arena-background-color:has( + .syn-seccion.has-arena-background-color ), .syn-seccion--compacta:has(> .wp-block-image:only-child).has-arena-clara-background-color:has( + .syn-seccion.has-arena-clara-background-color ) { padding-block-end: 0; } /* LA ENTRADILLA QUE VUELVE AL TEXTO DESPUES DE LA FOTO. Es la frase de reentrada, no un parrafo mas, y se separaba del cuerpo con los mismos 24 px que separan dos parrafos cualquiera — asi que no se leia como entrada de nada. Se le da 36. Solo aqui, en la seccion que viene despues de una foto a toda banda; las entradillas del resto del sitio no se tocan. */ .syn-seccion--compacta:has(> .wp-block-image:only-child) + .syn-seccion > .syn-entradilla + * { margin-block-start: var(--wp--preset--spacing--40); } /*-------------------------------------------------------------- # 4b · Hero con fotografia de fondo --------------------------------------------------------------*/ /* La foto la pone el bloque grupo con su soporte nativo de imagen de fondo (WordPress 7.1, group/block.json, "background": backgroundImage), asi que Sophie puede cambiarla desde el editor. Aqui va solo el aire, el velo y el fijado al hacer scroll. No se usa display:flex ni min-height porque el grupo lleva layout "constrained", que centra los hijos con margin-inline:auto. Poner flex en el padre desmonta ese centrado. El alto se consigue con relleno. */ .syn-hero { position: relative; padding-block: clamp(3.5rem, 15vh, 9.5rem); padding-inline: var(--wp--preset--spacing--70); /* EL ENCUADRE, SUBIDO. Sophie dijo que la portada habia perdido cielo y montanas. No es cosa del fichero — es que `cover` recorta: a 1440 px se comen 146 px de alto, y con el encuadre centrado la mitad se iba del cielo. Al 35 % se conserva el cielo y la cordillera, que es lo que ella queria, y lo que se pierde es primer plano de carretera, que aporta menos. El `background-position` del bloque lo pone WordPress en linea, asi que esto va con la misma especificidad que el filtro del heroe responsivo. */ } /* El encuadre NO se pone aqui. WordPress lo escribe como estilo en linea en el propio div, y un estilo en linea gana a cualquier selector sin `!important`. Se cambia en el ATRIBUTO DEL BLOQUE, que ademas lo deja bien en el editor. */ /* En movil el heroe medía 1.085 px de alto y `cover` recortaba 1.238 px de ancho — solo se veia el 24 % de la fotografia, y de ahi el desenfoque que ella noto. Bajando el relleno se acorta la caja y el recorte es menor. */ @media (max-width: 47.9375em) { .syn-hero { padding-block: 3.5rem; } } /* EL VELO, Y POR QUE ESTE VALOR EXACTO. Medido sobre la propia foto POR CELDAS, no por media. La media daba 7,07:1 para el blanco y habria enganado: el PEOR punto -una zona de hierba al sol, RGB(185,186,136)- daba 2,01:1, que es ilegible. El velo es laguna oscura, no negro, asi que la mezcla se calculo con ese color. Resultados sobre el peor punto: 45 % -> 4,06:1 solo valdria para titular grande 52 % -> 4,51:1 cumple AA justo, sin margen 60 % -> 5,15:1 cumple AA con margen <-- el elegido Se deja en 60 % porque el muestreo promedia celdas y un pixel suelto puede ser mas claro, y porque el JPEG anade artefactos. */ /* REVISADO EL 02/09/2026, CON LA FOTOGRAFIA NUEVA. La clienta dijo que el hero se veia «desfocado» y pidio verlo mas enfocado. No estaba desenfocado: el recorte se habia comido el cielo y las montanas, y encima el velo al 60 % le quitaba el contraste. Poco contraste el ojo lo lee como desenfoque. Con la foto nueva —mas clara, con cielo— el velo ya no vale como unica defensa del texto. Medido por celdas sobre los pixeles reales, ni al 60 % pasa: la celda mas clara da 4,16:1 y 16 de 96 quedan por debajo de 4,5. Y subirlo mas es tapar la foto, que es justo lo que ella no quiere. Asi que el texto pasa a ir sobre PANEL, que ademas es lo que ella misma pidio al ver manawaenergy.com —«falta un fondo detras de las letras»— y ya era regla de este proyecto. El velo baja al 25 % y solo asienta la imagen. */ .syn-hero::before { content: ""; position: absolute; inset: 0; background-color: rgba(30, 74, 66, 0.25); pointer-events: none; } /* El contenido, por encima del velo. */ .syn-hero > * { position: relative; z-index: 1; } /* EL PANEL DEL TEXTO. No usa `.syn-panel`, que es de fondo claro y texto oscuro. Aqui hace falta oscuro con texto blanco para no romper la linea del hero. 85 % y no solido para que la fotografia siga leyendose por detras. Medido sobre la celda MAS CLARA de la franja visible, rgb(186, 215, 246), que es la que manda: con velo al 25 % y panel al 85 % el blanco queda en 7,72:1. */ .syn-hero__panel { background-color: rgba(30, 74, 66, 0.85); border-radius: 3px; padding: var(--wp--preset--spacing--50); max-width: 46rem; margin-inline: auto; } .syn-hero__panel > *:last-child { margin-bottom: 0; } /* El boton, invertido. En laguna sobre un panel que tambien es laguna apenas se distingue. Es la misma pauta que ya usa la llamada a la accion del final de la portada, que va sobre fondo verde y por eso lleva el boton claro. Medido, arena clara sobre laguna da 6,68:1. */ .syn-hero__panel .wp-block-button a.wp-block-button__link:not(.has-background) { background-color: var(--wp--preset--color--arena-clara); color: var(--wp--preset--color--laguna); } .syn-hero__panel .wp-block-button a.wp-block-button__link:not(.has-background):hover, .syn-hero__panel .wp-block-button a.wp-block-button__link:not(.has-background):focus { background-color: var(--wp--preset--color--blanco); color: var(--wp--preset--color--laguna-oscura); } .syn-hero, .syn-hero :is(h1, h2, h3, p) { color: #fff; } .syn-hero .syn-antetitulo { color: rgba(255, 255, 255, 0.9); } /* FIJADO AL HACER SCROLL. Las tres reglas son EXACTAMENTE las que usa WordPress en su bloque cover, en wp-includes/blocks/cover/style.css lineas 388-411. Se copian en vez de inventarlas porque ya resuelven las dos trampas: 1. En iOS el fondo fijo se comporta mal. El nucleo lo detecta POR CAPACIDAD con @supports (-webkit-touch-callout: inherit), no por ancho de pantalla, asi que tambien acierta en un iPad de 1200 px. La referencia de Sophie, mindbodyspiritmaui, lo hace con una media query de 1025 px, que es peor. 2. El scroll es interaccion del usuario, y MDN pide poder desactivar esa animacion citando el criterio WCAG "Animation from Interactions". */ .syn-hero { background-attachment: fixed; } @supports (-webkit-touch-callout: inherit) { .syn-hero { background-attachment: scroll; } } @media (prefers-reduced-motion: reduce) { .syn-hero { background-attachment: scroll; } } /* Antetitulo de seccion. */ .syn-antetitulo { font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--pequeno); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--laguna); margin-bottom: var(--wp--preset--spacing--10); } .syn-entradilla { font-size: var(--wp--preset--font-size--entradilla); line-height: 1.6; color: var(--wp--preset--color--tinta-suave); /* `pretty` Y NO `balance`, a proposito. Los dos evitan la palabra suelta al final, pero `balance` deja de actuar a partir de seis lineas y aqui hay dos casos distintos — la entradilla corta de las aperturas, de dos lineas, y la larga de Chakra, que en movil pasa de seis. Medido a 430 y 390, esa ultima acababa con una palabra de 40 px en una caja de 387. `pretty` cubre los dos. Donde no este soportado no hace nada y no rompe nada. */ text-wrap: pretty; } /*-------------------------------------------------------------- # 4c · Banda de llamada a media pagina --------------------------------------------------------------*/ /* SOLO QUEDA LA BANDA PLANA, la de color salvia. La variante con fotografia de fondo se retiro el 03/09/2026 por indicacion de Marc — «no quiero nuevos fondos fotograficos en CTAs; si has anadido una imagen de fondo a un CTA que antes no la tenia, reviertelo». Y era eso exactamente: comprobado contra la revision 565, la ultima sin banda, el grupo no sustituia nada, se INSERTABA, y las paginas ya terminaban con su propia llamada. O sea un segundo CTA duplicado, con foto encima. Las doce fuera. La fotografia se queda donde estaba en el diseno aprobado, que es el heroe. Esto sobrevive porque lo usan las cinco paginas de RTT y RTC, que siguen sin publicar. Ahi la banda es un color plano, no una fotografia. */ .syn-banda { padding-block: clamp(3.5rem, 9vh, 6rem); padding-inline: var(--wp--preset--spacing--70); } .syn-banda__panel { max-width: 42rem; margin-inline: auto; } .syn-banda__panel > *:last-child { margin-bottom: 0; } /*-------------------------------------------------------------- # 4d · Viudas en los titulares --------------------------------------------------------------*/ /* AQUI HABIA UN `max-width: 56ch` SOBRE LA PROSA y se ha retirado el 03/09/2026, porque era la causa del defecto que Marc senalo en «Sobre mi». El razonamiento de partida no era malo — el cuerpo corria a 74-76 caracteres por linea y Bringhurst da 45-75. El fallo fue el efecto lateral: el `layout` "constrained" de WordPress centra a cada hijo con `margin-left:auto !important`, asi que estrechar SOLO el parrafo no lo recorta por la derecha, lo CENTRA dentro de la columna. Resultado medido a 1440 px, el H2 en x=380 y su propio parrafo en x=438. El antetitulo, el titular y el cuerpo son una unidad de lectura y tienen que arrancar en la misma vertical. Intente sujetarlo con `margin-left: 0 !important` y sale peor: eso tampoco recorta, tira el parrafo al borde de la seccion, x=48. La medida de linea la gobierna el contenedor, no el hijo, y el contenedor aqui es el `contentSize` de 680 px del tema, que es el ancho aprobado. Se deja como estaba. */ /* Los titulares se equilibran para que no quede una palabra sola en la ultima linea — «RTC® Rapid Transformational Coaching®» acababa con «Coaching®» colgando. `text-wrap: balance` reparte las lineas y lo resuelve sin tocar el texto. El navegador lo aplica hasta seis lineas, que aqui sobra. */ .syn-metodo > .wp-block-heading, .syn-banda__panel > .wp-block-heading, .syn-seccion > .wp-block-heading { text-wrap: balance; } /*-------------------------------------------------------------- # 5 · Tarjetas y rejillas --------------------------------------------------------------*/ .syn-tarjeta { background-color: var(--wp--preset--color--blanco); border: 1px solid rgba(46, 42, 38, 0.08); /* 12 px, igual que la ficha de metodo, el testimonio y la cita. Era la unica caja del sitio a 14 y esos 2 px de mas no significaban nada. */ border-radius: 12px; /* 24 px, NO 36. Era el unico tipo de caja del sitio que iba a `spacing--40` — las fichas de metodo, los testimonios y la cita van las tres a `spacing--30`. Cuatro tarjetas en la pagina de Kahi Loa se salian de la familia por 12 px, y encima eran las mas apretadas: a 1440 px la caja mide 277 y con 36 de relleno solo quedaban 205 de texto. */ padding: var(--wp--preset--spacing--30); height: 100%; } .syn-tarjeta > *:last-child { margin-bottom: 0; } /* Rejilla que se adapta sola. min() evita que la pista minima desborde cuando el contenedor es mas estrecho que ese minimo. */ .syn-rejilla { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); } /* WordPress pone `margin-block-start` a todos los hijos de un grupo menos al primero, para el flujo vertical. Dentro de una rejilla eso empuja hacia abajo las tarjetas 2, 3 y 4 y deja la primera descolocada arriba. Se anula con dos clases para ganarle en especificidad al CSS de soportes de bloque, que se imprime DESPUES de esta hoja. */ .wp-block-group.syn-rejilla > * { margin-block: 0; } .syn-rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); } /* FICHAS EN HORIZONTAL, UNA DEBAJO DE OTRA, COMO SECCIONES. Las cinco fichas de la pagina de precios llevan un parrafo entero mas una lista de precios. Puestas en rejilla se rompian por todos lados: a cuatro columnas de 277 px los titulares se partian a mitad de palabra —«Ener-gizacion», «Transfor-mation»—, a tres columnas la quinta se quedaba sola en la ultima fila, y en las dos las fichas se estiraban todas al alto de la mas larga, con hasta 400 px de hueco vacio dentro de las cortas. La causa de fondo es que esto NO son fichas de resumen como las del resto del sitio, son bloques de contenido largo. Puestas a lo ancho, cada una mide lo que mide su texto y no hay alturas que igualar ni filas que completar. COMO SE PARTE POR DENTRO, sin tocar el contenido. Cada ficha tiene siempre los mismos cuatro hijos —titular, entradilla, descripcion y lista— asi que se colocan por posicion: los dos primeros ocupan el ancho entero arriba, y debajo van la descripcion y la lista de precios en dos mitades. Si algun dia se anade un quinto bloque a una ficha, caera en la primera columna sin romper nada. VA COMO VARIANTE Y NO EN `.syn-rejilla`: esa clase la usan las portadas, Reiki, Chakra y Kahi Loa en cuatro idiomas, donde las fichas si son cortas y la rejilla es lo correcto. */ .syn-rejilla--bandas { grid-template-columns: 1fr; } @media (min-width: 48em) { .syn-rejilla--bandas > .syn-tarjeta { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--wp--preset--spacing--50); row-gap: var(--wp--preset--spacing--30); align-items: start; } /* EL HUECO ENTRE FILAS LO PONE LA REJILLA, NO LOS MARGENES. Dentro de una rejilla los margenes de cada hijo siguen contando, y como la lista no lleva margen superior y la descripcion si, las dos columnas arrancaban desalineadas: medido, el parrafo en y=624 y la lista en y=600. Con los margenes a cero y un `row-gap`, las dos empiezan en la misma linea y la separacion vertical es la misma que habia. */ .syn-rejilla--bandas > .syn-tarjeta > * { margin-block: 0; } /* El titular y la entradilla, a todo lo ancho. */ .syn-rejilla--bandas > .syn-tarjeta > :nth-child(1), .syn-rejilla--bandas > .syn-tarjeta > :nth-child(2) { grid-column: 1 / -1; } /* La descripcion a la izquierda y la lista de precios a la derecha, las dos arrancando arriba del todo de su fila. */ .syn-rejilla--bandas > .syn-tarjeta > :nth-child(3) { grid-column: 1; } .syn-rejilla--bandas > .syn-tarjeta > :nth-child(4) { grid-column: 2; } } /* LA FILA INCOMPLETA, CENTRADA — solo en la franja de dos columnas. En `grid`, `justify-content` coloca las PISTAS dentro del contenedor y no los elementos dentro de la fila, asi que con tres fichas en dos columnas la tercera se quedaba pegada a la izquierda mientras su titular iba centrado. En `flex` la ultima linea se centra sola. Solo entre 560 y 991 px, que es donde el recuento de columnas es fijo y se puede calcular la base. Por encima cada fila llena el ancho y no hay resto, y por debajo hay una sola columna. De paso las cuatro fichas de beneficios dejan de ir a 214 px en tableta, que con palabras alemanas era muy justo. */ @media (min-width: 35em) and (max-width: 61.99em) { /* Dos rejillas se quedan fuera de esta franja. `--bandas`, la de precios, porque ahi cada ficha ocupa la fila entera a cualquier ancho: no hay fila incompleta que centrar y ponerlas de dos en dos las devolveria a columnas estrechas, que es justo lo que se arreglaba. Y la del blog, porque en `flex` las fichas NO se estiran al alto de la fila. Medido a 768: dos fichas de la misma fila con 614 y 555 px de alto, y el enlace de seguir leyendo a alturas distintas. En `grid` con `stretch` las dos miden lo mismo. */ .syn-rejilla:not(.syn-rejilla--bandas):not(.syn-blog__rejilla) { --syn-col: calc( (min(var(--wp--style--global--wide-size), 100%) - var(--wp--preset--spacing--30)) / 2 ); display: flex; flex-wrap: wrap; justify-content: center; } .syn-rejilla:not(.syn-rejilla--bandas):not(.syn-blog__rejilla) > * { flex: 0 0 var(--syn-col); min-width: 0; } } /* En cuatro columnas la caja se queda estrecha y el aleman tiene palabras muy largas —«Selbstheilungskräfte»— que se salian de la tarjeta. La particion silabica la resuelve el navegador con el diccionario del idioma, y funciona porque el documento declara `lang` correctamente en los cuatro idiomas. */ /* * Las cuatro columnas y el aleman. Medido: con el cuerpo normal la caja de * texto se quedaba en 159 px y «Selbstheilungskräfte» ocupa 163, asi que la * palabra se partia por la mitad y sin guion —GeneratePress hereda * `overflow-wrap: break-word`, que rompe donde sea con tal de no desbordar—. * * Se le da aire por tres lados: un paso menos de cuerpo, menos relleno y menos * sangria de lista. `hyphens: auto` queda como primera opcion (parte por * silabas usando el diccionario del idioma declarado en `lang`) y el * `overflow-wrap` heredado como ultimo recurso, para que nunca se salga nada. */ .syn-rejilla--4 .syn-tarjeta { padding: var(--wp--preset--spacing--30) 1.25rem; hyphens: auto; } .syn-rejilla--4 .syn-tarjeta ul { padding-left: 1.05rem; font-size: var(--wp--preset--font-size--pequeno); } .syn-rejilla--4 .syn-tarjeta h3 { font-size: var(--wp--preset--font-size--entradilla); } /* Listas de ventajas a dos columnas en pantallas anchas. */ /* LA LISTA LARGA A DOS COLUMNAS. Son dieciseis ventajas seguidas y venian con el interlineado del cuerpo y sin aire entre puntos, asi que se leian como un parrafo troceado. Con separacion entre elementos cada punto se lee como un punto, que es lo unico que se le pide a una lista. */ .syn-lista-doble { column-gap: var(--wp--preset--spacing--40); list-style-position: outside; } .syn-lista-doble li + li { margin-top: var(--wp--preset--spacing--20); } @media (min-width: 48em) { .syn-lista-doble { columns: 2; /* reparte los dieciseis puntos entre las dos columnas en vez de llenar la primera y dejar la segunda corta */ column-fill: balance; } .syn-lista-doble li { break-inside: avoid; } } /*-------------------------------------------------------------- # 6 · Imagenes --------------------------------------------------------------*/ /* ESQUINA VIVA. Iban a 3 px, un radio que no se ve pero que impedia que las esquinas fueran una decision — en el mismo sitio convivian 3, 12, 14 y 999. Las nueve referencias que dio la clienta usan 0 en fotografia sin una sola excepcion, y es lo que separa una pagina editorial de una plantilla. */ .syn-figura img { /* 5 px en todas las fotografias, pedido por Marc el 04/09. El heroe no entra: es un fondo de seccion, no un `img`, y va a sangre. */ border-radius: 5px; width: 100%; height: auto; object-fit: cover; } /* LA FOTO ANCHA NO LLEGA A SANGRE, Y ES POR EL FICHERO. `chakra-healing.jpg` y `kahi-loa.jpg` son de 1.200 px y se estaban pintando a 1.180, o sea a ×1,02. En cualquier pantalla de doble densidad eso se ve blando, y es lo primero que delata un montaje. A 60rem el mismo fichero va a ×1,25 y ademas la fotografia deja de ser una losa y pasa a estar compuesta, con aire a los lados. No se amplia nada y no se pide material nuevo. */ /* LA FOTO ANCHA MIDE LO MISMO QUE EL TEXTO QUE VA DEBAJO. Solo hay dos sitios donde una figura apaisada va suelta en una seccion, sin columna que la sujete: Chakra y Kahi Loa, en sus cuatro idiomas. Ahi la foto estaba a 496 px y el parrafo a 680, asi que la imagen quedaba encogida y flotando sobre un texto mas ancho — dos ejes verticales distintos en la misma columna de lectura. NO SE PONE 680 A MANO. Se lee el ancho de contenido de theme.json, que es lo que WordPress ya usa para los parrafos. Si algun dia se toca ahi, la foto y el texto siguen midiendo lo mismo sin volver a este fichero. */ .syn-seccion > .syn-figura--paisaje, .syn-figura--paisaje { max-width: var(--wp--style--global--content-size); margin-inline: auto; } /* Dentro de una columna manda la columna, que ahi la foto ya es pequena. */ .wp-block-column .syn-figura--paisaje { max-width: none; } /* LA MEDIDA DE LA PROSA DENTRO DE UNA COLUMNA. Al pasar las columnas del Reiki a 30/70 para que la fotografia llenara la suya, la columna de texto se fue a 787 px y la linea a 93 caracteres. El rango comodo son 45-75. Se acota la PROSA, no el titular ni la cita, y la caja se queda pegada al eje de la columna porque dentro de una columna el `layout` es "flow" y no reparte margenes automaticos. 58ch, no 66. `ch` es el ancho del glifo «0» y el ingles tiene la letra media mas estrecha que el aleman, asi que el mismo ancho en pixeles da cuentas de caracteres distintas — con 66ch salian 84 por linea en ingles y 76 en aleman, medido. Con 58ch se aterriza en 74 y 67, los dos dentro del rango. */ .wp-block-column > p { max-width: 58ch; } /* Proporcion estable para que el diseño no dependa del alto real de la foto, que todavia es provisional. */ /* Se limita el ancho del retrato a proposito. Con 4:5 a ancho de columna completa la foto pasaba de 570 px de alto y dejaba el texto de al lado flotando en medio de un hueco enorme. */ .syn-figura--retrato { max-width: 22rem; /* PEGADA AL EJE DE SU COLUMNA, no centrada dentro de ella. Con `auto` a los dos lados la foto quedaba 72 px metida hacia dentro mientras el texto de la columna de al lado arrancaba pegado al suyo — una columna centrada y la otra no, en la misma pareja. Comprobado en las dieciseis paginas: la figura siempre es la columna 1 de 2, asi que su eje es el de la seccion. */ margin-inline-end: auto; } /* CUANDO LAS COLUMNAS APILAN, EL TITULAR Y EL BOTON SE CENTRAN. Pedido por Marc el 04/09 para el bloque de la portada: retrato a un lado, titular + texto + boton al otro. Con las dos columnas en pareja el titular arranca en el eje de su columna y acompana a la foto. Apiladas, la foto se centra sola y el titular se quedaba solo, pegado a la izquierda de una caja ancha, con el boton igual de descolgado. EL TEXTO NO. Solo el titular y la llamada; el parrafo sigue a la izquierda, que es como se lee. Es el mismo criterio que Marc ya fijo para las secciones de servicio. SOLO ESTE CASO. La condicion es que la columna tenga titular Y boton, que es lo que la hace una llamada y no un bloque de lectura. Comprobado a 430 en las veinticuatro paginas: cumplen cuatro columnas, las cuatro portadas, una por idioma. Ninguna otra. Y A 781, no a un ancho de movil inventado: es el punto exacto en el que WordPress apila las columnas, o sea el momento en que el titular se queda sin pareja. */ @media (max-width: 781px) { .wp-block-column:has(> .wp-block-heading):has(> .wp-block-buttons) > .wp-block-heading { text-align: center; } .wp-block-column:has(> .wp-block-heading):has(> .wp-block-buttons) > .wp-block-buttons { justify-content: center; } } /* CUANDO LAS COLUMNAS APILAN, LA FOTO SE CENTRA. El eje compartido tiene sentido mientras hay pareja. Al apilar —WordPress lo hace por debajo de 782 px— la columna pasa a ancho completo y la foto, que sigue topada a 22rem, dejaba 339 px muertos a su derecha, medido a 768. Ahi ya no acompana a nada, es una imagen suelta entre dos bloques de texto, y lo que toca es centrarla. */ @media (max-width: 781px) { .syn-figura--retrato { margin-inline: auto; } } .syn-figura--retrato img { aspect-ratio: 4 / 5; } /* IMAGEN + TEXTO, CENTRADOS ENTRE SI. Esto NO se arregla desde aqui y conviene dejarlo escrito: el nucleo emite `.wp-block-columns{align-items:normal !important}` y expone la alineacion vertical como ATRIBUTO del bloque, que pinta la clase `are-vertically-aligned-center`. Asi que se ha puesto `verticalAlignment` en los bloques de columnas que llevan figura, que ademas es lo que Sophie puede cambiar desde el editor. */ .syn-figura--paisaje img { aspect-ratio: 3 / 2; } /* Cuadrada, para cuando hay que poner juntas fotos de proporciones distintas. Es el caso de los tres pilares: Reiki es vertical (1000x1250) y Chakra y Kahi Loa son horizontales (1200x800). El 1:1 es el unico recorte que sobrevive a las dos orientaciones — recortar las horizontales a 4:5 se comia las manos de Kahi Loa, y recortar la vertical a 3:2 le cortaba la cabeza. */ .syn-figura--cuadrada img { aspect-ratio: 1 / 1; } /* Banda ancha y baja, para que una foto de cabecera no se coma una pantalla entera. Con las imagenes provisionales la diferencia es de medio scroll. */ .syn-figura--banda img { aspect-ratio: 21 / 9; } @media (max-width: 47.9375em) { .syn-figura--banda img { aspect-ratio: 16 / 9; } } /*-------------------------------------------------------------- # 7 · Texto sobre imagen --------------------------------------------------------------*/ /* La clienta senalo de manawaenergy.com que «falta un fondo detras de las letras» y que «uno se pierde un poco al leer». Todo texto sobre imagen lleva panel solido. */ .wp-block-cover .syn-panel, .syn-panel { background-color: var(--wp--preset--color--arena-clara); border-radius: 14px; padding: var(--wp--preset--spacing--40); } .wp-block-cover .syn-panel :where(h1, h2, h3, h4, p) { color: var(--wp--preset--color--tinta); } /*-------------------------------------------------------------- # 7b · Respiro dentro de un bloque largo de prosa --------------------------------------------------------------*/ /* La biografia de la portada son seis parrafos seguidos, 1.192 px de un tiron. Esta clase dobla el hueco antes del parrafo que abre la segunda mitad, que es donde cambia el asunto — arriba las credenciales, abajo la practica de hoy. No es una seccion nueva ni una linea, solo aire. Va en `em` para que el respiro crezca con la letra si alguien amplia. */ .syn-respiro { margin-block-start: 3em; } /*-------------------------------------------------------------- # 8 · Cita y aviso legal --------------------------------------------------------------*/ /* La cita vive en su propia caja, fuera del cuerpo del texto. Copiado de la pauta de mindbodyspiritmaui.com/spiritual-transpersonal-counseling/, donde la cita no va intercalada en la prosa sino en un recuadro al lado. */ /*-------------------------------------------------------------- # 8b · Banda de datos practicos de la sesion --------------------------------------------------------------*/ /* Al final de cada pagina de servicio, antes de la llamada a la accion. La duracion y los lugares se sacan de la prosa y se ponen en una banda propia, que es lo que hace la pagina de servicio de la referencia. EL PRECIO NO VA AQUI. Su pagina de precios queda sin publicar por decision suya del 11/08, y meter el importe en la pagina de servicio se la saltaria. Los textos de duracion y lugares son literales de su PDF. */ /* Va sobre arena, no sobre verde oscuro. Se probo en laguna-oscura y quedaba pegada a la llamada a la accion, que ya es verde: dos bandas oscuras seguidas apagaban el boton. */ .syn-datos :is(h2, p, li) { color: var(--wp--preset--color--tinta); } .syn-datos h2 { font-size: var(--wp--preset--font-size--titulo-3); margin-block-end: var(--wp--preset--spacing--20); } .syn-datos ul { margin-block: 0; } .syn-datos li + li { margin-block-start: 0.45rem; } /* Aviso legal pedido por escrito por la clienta: cuerpo 10 y otro color. Se interpreta 10 pt (13,3 px), que es la unidad del documento original de Apple Pages. Contraste 6,75:1 sobre el fondo, pasa AA. */ .syn-aviso { font-size: var(--wp--preset--font-size--aviso); line-height: 1.6; color: var(--wp--preset--color--tinta-suave); /* Medido a 1440 px: 102 caracteres por linea. Un descargo legal, que ya va en cuerpo pequeno, a 102 caracteres es de las cosas que nadie lee. El rango comodo son 45-75 y el techo practico 90. */ max-width: 58ch; } /* Dentro del pie manda la rejilla de columnas, no este ancho. */ .site-info .syn-aviso { max-width: none; } /*-------------------------------------------------------------- # 9 · Testimonios --------------------------------------------------------------*/ /* Fichas al estilo de santswebdesign.com: una caja blanca con la cita, sombra suave en vez de borde, y la firma FUERA, debajo, con la inicial en un circulo. Medido en la web de SWD el 01/09/2026 — radio 12 px, relleno 20, sombra `1px 4px 10px rgba(0,0,0,.1)` y avatar circular de 40 px. LO QUE NO SE COPIA, y a proposito: las estrellas y el logotipo de Google. Las de SWD son reseñas de Google con su puntuacion; estas son testimonios que Sophie facilito por escrito, sin nota. Pintar cinco estrellas seria inventarse una valoracion que nadie ha dado. */ /* La reseña era una tarjeta DENTRO de otra tarjeta. `syn-tarjeta` ponia fondo blanco, borde y 36 px de relleno, y `syn-testimonio` dentro ponia otro fondo blanco y otros 36: 72 px por lado. En una columna de 377 el texto se quedaba en 233 px y se partia a ocho palabras por linea. Se desactiva la caja de fuera, que pasa a ser solo el contenedor de la ficha y su firma. Se acota con `:has()` porque `syn-tarjeta` la usan tambien otras rejillas del sitio, donde SI tiene que seguir siendo una caja. */ .syn-tarjeta:has(> .syn-testimonio) { background-color: transparent; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); } .syn-testimonio { background-color: var(--wp--preset--color--blanco); border-radius: 12px; padding: var(--wp--preset--spacing--30); box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.05); /* Que las tres cajas midan lo mismo aunque la cita sea mas corta, para que las tres firmas queden a la misma altura. */ flex: 1; } .syn-testimonio p { margin: 0; } /* La firma, ya fuera de la caja blanca. */ .syn-firma { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); margin: 0; padding-inline-start: var(--wp--preset--spacing--10); } .syn-inicial { flex: 0 0 auto; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background-color: var(--wp--preset--color--laguna); color: var(--wp--preset--color--blanco); font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--pequeno); font-weight: 600; display: grid; place-items: center; } .syn-testimonio cite, .syn-firma cite { font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--pequeno); font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--laguna); } /*-------------------------------------------------------------- # 10 · Pasos numerados --------------------------------------------------------------*/ .syn-pasos { counter-reset: syn-paso; list-style: none; padding-left: 0; display: grid; gap: var(--wp--preset--spacing--30); } /* AIRE ANTES DE UNA LISTA LARGA. Medido a 1440. En los pasos del Reiki, el titular y la entradilla iban a 24 px, la entradilla y la lista tambien a 24, y los pasos entre si otros 24 — con el mismo hueco en los tres sitios, la entradilla se leia como el paso cero. En «Lo que puedes esperar» de Chakra pasaba igual, 24 al titular y 16 entre puntos, asi que el titular parecia el primer punto de la lista. Con 56 px el encabezado queda como una unidad y la lista arranca como bloque aparte, sin tocar la separacion entre pasos, que sigue en 24. Va con el padre delante porque el margen de 24 lo pone el `layout` del bloque —`.is-layout-constrained > *`, peso (0,1,0)— y `.syn-pasos` sola empataria y dependeria del orden de carga. */ .syn-seccion > .syn-pasos, .syn-seccion > .syn-lista-doble { margin-block-start: var(--wp--preset--spacing--50); } .syn-pasos li { counter-increment: syn-paso; padding-left: 3.25rem; position: relative; } .syn-pasos li::before { content: counter(syn-paso); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background-color: var(--wp--preset--color--laguna); color: var(--wp--preset--color--arena-clara); font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--pequeno); font-weight: 700; } /*-------------------------------------------------------------- # 11 · Cabecera y navegacion --------------------------------------------------------------*/ .site-header { border-bottom: 1px solid rgba(46, 42, 38, 0.08); } .main-navigation .main-nav ul li a { font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--pequeno); font-weight: 500; letter-spacing: 0.02em; } .main-navigation .main-nav ul li.current-menu-item > a { font-weight: 700; } /* EL SUBMENU, DENTRO DE LA ESCALA. GeneratePress lo baja a 14 px, que no es ninguno de los siete pasos del tema. Los tres enlaces del desplegable eran el ultimo tamano huerfano que quedaba en la pagina. */ .main-navigation .main-nav ul ul li a { font-size: var(--wp--preset--font-size--pequeno); } .site-branding .main-title { font-family: var(--wp--preset--font-family--titulos); font-weight: 500; letter-spacing: 0.01em; /* DENTRO DE LA ESCALA. GeneratePress lo dejaba en 25 px, que no es ninguno de los siete pasos del tema — el mas cercano era `titulo-3` a 24, un punto de diferencia que solo sirve para que la marca no case con nada. */ font-size: var(--wp--preset--font-size--entradilla); } /* EL NOMBRE, EN EL VERDE DEL MENU. Pedido por Marc el 04/09. Va con el enlace delante porque GeneratePress pinta el color del titulo del sitio desde su CSS dinamico, sobre `.main-title a`, y una regla sobre el `p` no le gana. Contraste medido: laguna #2A6157 sobre arena-clara #FBF7F1 da 6,68:1, o sea que cumple AA con holgura incluso para texto grande, que solo pide 3. */ .site-branding .main-title, .site-branding .main-title a, .site-branding .main-title a:hover, .site-branding .main-title a:focus-visible { color: var(--wp--preset--color--laguna); } /* El logotipo se sirve a 213 px para un hueco de 64. `fill` deformaria si algun dia cambia la proporcion del fichero, `contain` no. */ .site-logo img { object-fit: contain; } /* EL ENLACE DEL LOGOTIPO, CON LA CAJA DE SU IMAGEN. Siendo `inline` su caja medía 64x19 aunque la imagen fuera de 64x60 — el area pulsable no coincidia con lo que se ve. Medido a 320 px. */ .site-logo a { display: block; line-height: 0; } /* Y EL NOMBRE, CON ALTURA DE OBJETIVO. Su enlace daba 93x23, un pixel por debajo de los 24x24 que pide el criterio 2.5.8. Cumplia por la excepcion de separacion —no tiene ningun otro objetivo a menos de 24 px— pero un pixel se arregla y se deja de depender de una excepcion. */ .site-branding .main-title a { /* El interlineado no basta: a 320 px la letra baja a 18 y 18x1,25 son 22,5. Con un minimo de 24 el objetivo cumple a cualquier ancho, y como el texto va centrado en la caja no se mueve nada de sitio. */ display: inline-flex; align-items: center; min-block-size: 1.5rem; line-height: 1.25; } .site-branding .site-description { font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--tinta-suave); } /*-------------------------------------------------------------- # 11b · Menu movil lateral · EL PANEL DE GP PREMIUM --------------------------------------------------------------*/ /* AQUI YA NO HAY PANEL ESCRITO A MANO, Y CONVIENE SABER POR QUE. Hasta el 05/09/2026 este apartado eran 220 lineas que convertian la navegacion normal de GeneratePress en un panel deslizante: posicion fija, velo, bloqueo del desplazamiento, el boton de la cabecera reaprovechado como aspa de cerrar. Funcionaba, pero se le fueron viendo las costuras — la cruz se iba con la cabecera al desplazar, la barra de administracion se la comia, el tabulador se escapaba detras del velo y no cerraba con Escape. Ahora lo hace el modulo Menu Plus de GP Premium, que es el mismo componente que usa santswebdesign. Trae de fabrica el aspa DENTRO del panel, el velo que cierra al pulsarlo, Escape, y el foco puesto en el primer enlace al abrir. LO QUE **NO** TRAE, leido en su propio `offside.js` de la 2.5.6 el 07/09/2026 y no supuesto: no atrapa el foco dentro del panel, y al cerrar con Escape solo lo devuelve al boton si `clientWidth <= 768` — o sea que entre 769 y 959, que es justo la tableta, no lo devolvia. Las dos cosas las pone `synlokahi_panel_foco()` en functions.php, con `inert` sobre todo lo que no es el panel. Este comentario decia antes que lo traia GP. No es verdad. Se configura en Personalizar → Menus, no en este fichero: panel lateral en movil · estilo deslizante · desde la derecha aspa dentro · corte en 959 px Lo que queda mas abajo es SOLO lo que el componente no cubre — el ancho, el aire de dentro y el aspecto de los enlaces con la tipografia del sitio. */ /* EL ANCHO no se pone aqui: GP lo saca a la variable `--gp-slideout-width` y solo se puede cambiar por el filtro `generate_slideout_width`, que esta en functions.php con su explicacion. */ /* EL EJE DE LA HAMBURGUESA, MEDIDO Y NO ELEGIDO. El boton de GeneratePress mide 55x60 y su centro cae a 50 px del techo y a 57 del canto derecho. Medido el 07/09/2026 a 959, 768, 430, 390 y 320 — sale el mismo numero en los cinco, porque lo fija la altura de la cabecera y no el ancho de la pantalla. El aspa del panel se coloca EN ESE MISMO PUNTO. Es lo que hace que se cierre sin buscarla: al abrir, el dedo ya esta ahi. Si algun dia cambia el logotipo, la cabecera cambia de alto y estos dos numeros hay que volver a medirlos. */ .slideout-navigation.main-navigation { --syn-eje-menu-y: 50px; --syn-eje-menu-x: 57px; --syn-aspa: 44px; } /* EL AIRE DE DENTRO. GP deja el contenedor a cero y los enlaces salen pegados al canto. El relleno de arriba se calcula para que el centro del aspa caiga en el eje de la hamburguesa, no para que quede bonito. Con la barra de administracion puesta baja lo que mida la barra — el numero lo publica el nucleo en su propia variable. */ .slideout-navigation.main-navigation .inside-navigation { display: block; padding: calc(var(--syn-eje-menu-y) - var(--syn-aspa) / 2) 0 var(--wp--preset--spacing--40); max-width: none; } .admin-bar .slideout-navigation.main-navigation .inside-navigation { padding-top: calc(var(--syn-eje-menu-y) - var(--syn-aspa) / 2 + var(--wp-admin--admin-bar--height, 0px)); } /* EL ASPA · 44x44 y en el eje de la hamburguesa. Antes era una franja de ancho completo y 25 px de alto, o sea que pasaba el 24x24 del criterio 2.5.8 por un pixel y no se parecia en nada al boton de 55x60 que se acababa de pulsar. Ahora es una caja de 44, que es la medida que recomiendan las guias de movil, y su centro cae donde estaba el del dedo. `margin-inline-start: auto` la empuja a la derecha en vez de estirarla, asi que el area pulsable ES el boton y no una banda que llega hasta el primer enlace. */ .slideout-navigation.main-navigation button.slideout-exit { display: flex; align-items: center; justify-content: center; width: var(--syn-aspa); height: var(--syn-aspa); padding: 0; margin-inline: auto calc(var(--syn-eje-menu-x) - var(--syn-aspa) / 2); line-height: 1; color: var(--wp--preset--color--tinta); cursor: pointer; } .slideout-navigation.main-navigation button.slideout-exit svg { width: 22px; height: 22px; fill: currentColor; } .slideout-navigation.main-navigation button.slideout-exit:hover { color: var(--wp--preset--color--laguna); } .slideout-navigation.main-navigation button.slideout-exit:focus-visible { outline: 2px solid var(--wp--preset--color--laguna); outline-offset: 2px; border-radius: 4px; } /* El aire entre el aspa y el primer enlace va en el bloque del menu, no como margen del boton, por lo mismo de arriba. */ .slideout-navigation.main-navigation .main-nav { margin-block: var(--wp--preset--spacing--30) 0; } /* LOS ENLACES, con la tipografia del sitio. GeneratePress saca `line-height: 60px` sobre el enlace, del ajuste `menu_item_height` que vale 60 de fabrica (inc/defaults.php:348). En una barra horizontal ese numero ES la altura de la barra y esta bien; apilado en vertical se suma al relleno y cada fila se va a 90 px. */ .slideout-navigation.main-navigation .main-nav ul li a { display: block; padding: 0.9rem var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--base); line-height: 1.45; border-block-end: 1px solid rgba(46, 42, 38, 0.07); } /* EL VELO. GP lo trae en negro al 80 %, que sobre una web clara borra la pagina de detras del todo y el panel parece una pantalla nueva. Con el verde de la marca al 55 % la pagina se sigue reconociendo — se ve donde estabas. Va con el selector repetido a proposito: la hoja del modulo se encola DESPUES que la del tema hijo, asi que con una sola clase ganaba la suya por orden de carga aunque la especificidad fuera la misma. Repetirla sube el peso sin recurrir a `!important`. */ .slideout-overlay.slideout-overlay { background-color: rgba(30, 42, 38, 0.55); } /*-------------------------------------------------------------- # 11c · El boton de volver arriba --------------------------------------------------------------*/ /* NO HAY REGLA AQUI, Y ES A PROPOSITO. GeneratePress lo pintaba con `rgba(0,0,0,0.4)`, que sobre el crema del sitio da 2,83:1, por debajo del 3:1 que pide el criterio 1.4.11 para lo que identifica un control — y aqui el fondo ES lo unico que da forma al boton. Se intento arreglar desde este archivo y NO GANA: el tema lo emite como `a.generate-back-to-top`, con mas especificidad, y ademas en linea dentro de `wp_head`, que va despues de esta hoja. Pelear eso pedia `!important`. El camino limpio es el que el tema ya ofrece — son cuatro ajustes del personalizador, `back_to_top_background_color` y sus tres hermanos, que se ven en `inc/defaults.php:188-191`. Estan puestos en laguna y arena-clara. Medido: 6,68:1 el boton sobre el crema y 7,13:1 la flecha sobre el boton. */ /*-------------------------------------------------------------- # 12 · Selector de idioma --------------------------------------------------------------*/ /* Los idiomas son entradas del menu principal, asi que heredan su maquetacion —incluido el menu movil— sin necesidad de reglas propias para eso. Aqui solo se ajusta lo que los distingue del resto de entradas. */ .main-navigation .main-nav ul li.syn-idioma > a { font-size: var(--wp--preset--font-size--aviso); font-weight: 700; letter-spacing: 0.1em; color: var(--wp--preset--color--tinta-suave); padding-left: 0.6em; padding-right: 0.6em; } /* Una linea separa los idiomas del resto del menu, para que se lean como un grupo aparte y no como una pagina mas. */ .main-navigation .main-nav ul li.syn-idioma--primero > a { border-left: 1px solid rgba(46, 42, 38, 0.2); margin-left: var(--wp--preset--spacing--20); padding-left: calc(var(--wp--preset--spacing--20) + 0.2em); } .main-navigation .main-nav ul li.syn-idioma--activo > a { color: var(--wp--preset--color--laguna); text-decoration: underline; text-underline-offset: 0.35em; } /* En el panel, los idiomas van apilados, asi que el filete que los separa del resto del menu pasa de vertical a horizontal. NO LLEVA CONSULTA DE MEDIOS Y ES A PROPOSITO: el panel solo existe por debajo del punto de corte, asi que su propia clase ya dice «esto es movil». Antes iba con un `@media` de 959,98 escrito a mano, que era un segundo sitio donde mantener el mismo numero. */ .slideout-navigation .main-nav ul li.syn-idioma--primero > a { border-left: 0; border-top: 1px solid rgba(46, 42, 38, 0.2); margin-left: 0; } /* Y CON EL MISMO MARGEN LATERAL QUE LAS DEMAS FILAS. En la barra horizontal los idiomas llevan un relleno propio de 0,6em para ir apretados entre ellos. Apilados en el panel, ese numero los dejaba empezando 9 px antes que el resto del menu — cuatro filas desalineadas de las otras cuatro, en la misma lista. */ .slideout-navigation .main-nav ul li.syn-idioma > a { padding-inline: var(--wp--preset--spacing--30); } /* LOS IDIOMAS SE QUEDAN APILADOS, UNO POR FILA. El 07/09/2026 los puse en una sola fila de cuatro, para que el panel no pareciera de nueve paginas cuando son cuatro mas un selector. Marc lo vio y no le gustó, asi que vuelven a su fila cada uno. Se apunta aqui para que nadie lo vuelva a intentar creyendo que es una mejora sin probar. */ /*-------------------------------------------------------------- # 13 · Pie --------------------------------------------------------------*/ /* Pie a tres columnas con la firma debajo, con la estructura de santswebdesign.com. Alli el fondo es azul marino; aqui se usa el verde profundo de la paleta, que es el unico color oscuro que tiene. Contraste medido sobre laguna-oscura #1E4A42: titulos en arena-clara #FBF7F1 ....... 9,19:1 enlaces en salvia #DEE7E1 ....... 7,76:1 Los dos pasan AAA de sobra. No se usa opacidad para atenuar el texto, que es como se cuelan los contrastes malos sin que nadie los mida. */ .site-footer { background-color: var(--wp--preset--color--laguna-oscura); color: var(--wp--preset--color--salvia); } .syn-pie { padding-block: var(--wp--preset--spacing--60); padding-inline: var(--wp--preset--spacing--70); } /* EL PIE SE AJUSTA A LAS COLUMNAS QUE HAY DE VERDAD. Estaba pensado para cuatro —legal, contacto, servicios y una de reserva— y como las paginas legales todavia no existen solo se imprimen dos. Con las pistas a `1fr` esas dos se estiraban hasta 562 px cada una, o sea dos listas de tres enlaces cortos ocupando 1.180 px. No parecia un pie de dos columnas, parecia un pie de cuatro con dos que faltan. Con la pista ACOTADA a 20rem y el conjunto centrado, dos columnas se leen como dos columnas. Y el dia que existan las legales entran tres sin tocar nada, porque `auto-fit` las crea solo. */ .syn-pie__interior { max-width: var(--syn-ancho-contenido, 1180px); margin-inline: auto; display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 20rem)); justify-content: center; } .syn-pie__titulo { font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--pequeno); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--arena-clara); margin: 0 0 var(--wp--preset--spacing--30); } .syn-pie__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--pequeno); } /* Lo que no es enlace, en un tono mas apagado. Los nombres de las paginas legales todavia no enlazan a ninguna parte —estan en borrador— y las dos ubicaciones no son pulsables. Con el color de enlace parecian las dos cosas clicables y no lo son. */ .syn-pie__texto { color: rgba(251, 247, 241, 0.62); } .syn-pie__lista a { color: var(--wp--preset--color--salvia); text-decoration: none; } .syn-pie__lista a:hover, .syn-pie__lista a:focus-visible { color: var(--wp--preset--color--blanco); text-decoration: underline; text-underline-offset: 0.25em; } .site-info { font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--salvia); background-color: transparent; /* La linea que separa las columnas de la firma, como en la referencia. */ border-top: 1px solid rgba(251, 247, 241, 0.15); } .site-info .copyright-bar { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); align-items: center; text-align: center; } .syn-pie-aviso { max-width: 62ch; } /* El descargo medico usa `.syn-aviso`, que esta pensado para fondo claro y va en tinta-suave. Sobre el verde del pie eso daba 1,38:1, o sea ilegible. Se corrige SOLO dentro del pie, porque el mismo aviso sale tambien a mitad de pagina sobre arena clara, donde el color original si es el correcto. Medido: salvia sobre laguna-oscura = 7,87:1. */ .site-info .syn-pie-aviso { color: var(--wp--preset--color--salvia); } /* LA FIRMA DE AUTORIA, DEL MISMO COLOR QUE LA LINEA Y SIN RAYA. Es un credito, no una llamada: si va en verde y subrayado tira del ojo mas que el propio nombre de la clienta, que esta justo al lado. Con `currentColor` coge el color de la linea entera, asi que si algun dia cambia el pie no hay que acordarse de este selector. SIGUE SIENDO IDENTIFICABLE. Al pasar el raton y al recibir el foco aparece el subrayado, que es lo que pide el criterio 1.4.1 de la WCAG cuando un enlace no se distingue del texto por color: hace falta OTRA señal, y aqui la da el estado. Y el foco mantiene su anillo, que lo pone la regla general. */ .site-info .copyright a { color: currentColor; text-decoration: none; } .site-info .copyright a:hover, .site-info .copyright a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } /* La barra vertical que separa la marca de la firma, mas discreta que el texto para que se lea como un separador y no como un caracter mas. */ .site-info .syn-pie-sep { opacity: 0.55; padding-inline: 0.15em; } /*-------------------------------------------------------------- # 13 bis · Los cinco metodos --------------------------------------------------------------*/ /* CAMBIO DE CRITERIO DE LA CLIENTA, 02/09/2026. En agosto pidio por escrito que los pilares NO fueran uno al lado del otro —«3PILLARS not to each other»— y por eso estaban apilados. Viendo la demo pidio justo lo contrario: que se vean los cinco de una vez sin scroll, «tal vez seria bien tener un resumen donde se vean los 5 de una vez». El cambio lo pide ella y queda anotado tambien en cliente.md. Son cinco y no tres porque su documento del 19/08 los agrupa en dos categorias — RTT y RTC por un lado, y Reiki, Chakra y Kahi Loa por otro. Con la rejilla automatica salen 2 arriba y 3 abajo, que es la lectura que ella describia. */ /* Las categorias usan el ancho ANCHO, no el de lectura. La seccion lleva layout "constrained", y WordPress capa a sus hijos al `contentSize`, que aqui son 680 px. Con 680 solo caben dos columnas, asi que la categoria de tres metodos rompia en 2 + 1. Con los 1180 del `wideSize` entran las tres. Gana sin esfuerzo porque la regla del nucleo va con `:where()`, que pesa cero: `:where(.is-layout-constrained) > :where(:not(.alignleft)...)`. */ .syn-categoria { max-width: var(--wp--style--global--wide-size); } .syn-categoria + .syn-categoria { margin-top: var(--wp--preset--spacing--50); } /* EL ROTULO DE CATEGORIA YA NO ES UN `h2`, es un antetitulo. Era un `

` pintado a 15 px, o sea MAS PEQUENO QUE EL CUERPO de texto y mas pequeno que los `h3` de las fichas que van debajo, a 27. La jerarquia semantica decia una cosa y la visual la contraria. Ahora es lo que parece. El aspecto no cambia ni un pixel: se conservan aqui el interletrado de 0,06em y el margen inferior que tenia el titular, distintos de los del antetitulo normal. */ .syn-categoria > .syn-antetitulo, .syn-categoria > .wp-block-heading { font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--pequeno); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--laguna); margin-bottom: var(--wp--preset--spacing--30); } .syn-metodos { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } /* LAS CINCO FICHAS TIENEN QUE SER UNA FAMILIA. Con `auto-fit` cada categoria repartia el ancho entre SUS fichas, asi que la de dos daba tarjetas de 578 px y la de tres, de 377. Medido. Cinco tarjetas con dos anchos distintos no se leen como un conjunto, se leen como dos cosas que casualmente estan cerca. A partir de 1216 px, que es donde cabe entero el ancho ancho de 1180, la pista se fija al tercio exacto y las cinco miden lo mismo. La fila de dos queda centrada con `justify-content`, que es lo que la hace parecer compuesta y no sobrante. Por debajo se deja el comportamiento fluido de antes, que ya reparte bien. */ /* Entre tableta y portatil pequeno no caben tres fichas dignas — a 860 px el tercio son 242, y ademas la categoria de dos daba 375 y la de tres 242, o sea otra vez dos anchos. Aqui se fuerzan DOS columnas y las cinco vuelven a medir lo mismo, en 2 + 2 + 1. */ /* EL LIMITE DE ABAJO ES 35em, NO 48em. La rejilla base pasa a dos columnas en cuanto el contenedor da para dos pistas de 15rem mas el hueco, o sea sobre los 560 px de ventana — no espera a los 768. Entre 560 y 767 tambien habia tres fichas en dos columnas con la tercera descolgada a la izquierda, 179 px fuera del centro de su rotulo a 767. A 560 la ficha sale de 243 px, que sigue por encima del minimo de 15rem con el que se diseño. */ @media (min-width: 35em) and (max-width: 61.99em) { /* AQUI FLEX Y NO REJILLA, y es por una limitacion real: en `grid`, `justify-content` coloca las PISTAS dentro del contenedor, no los elementos dentro de la fila. Con tres fichas en dos columnas, la tercera se queda en la pista 1 y no hay forma de centrarla — medido, su centro en 231 y el del rotulo en 430. En `flex` la ultima linea se centra sola. Solo en esta franja, donde SIEMPRE son dos columnas. Por debajo sigue mandando la rejilla fluida de arriba, que reparte bien. La anchura de ficha no cambia: la mitad del contenedor menos el hueco da los mismos 375 px a 860 y 334 a 768 que daba `repeat(2, 1fr)`. */ .syn-metodos { --syn-ficha: calc( (min(var(--wp--style--global--wide-size), 100%) - var(--wp--preset--spacing--30)) / 2 ); display: flex; flex-wrap: wrap; justify-content: center; } .syn-metodos > * { flex: 0 0 var(--syn-ficha); /* `min-width: 0` PORQUE UN ELEMENTO FLEXIBLE NO BAJA DE SU ANCHO MINIMO DE CONTENIDO por defecto. Medido a 560 px en ingles: la base daba 240 para las dos fichas y la segunda salia a 244, porque «Transformational» no cabe en 240 y `min-width: auto` la ensanchaba. Dos anchos distintos en la misma fila por una sola palabra. */ min-width: 0; } } @media (min-width: 62em) { .syn-metodos { /* Un TERCIO DEL CONTENEDOR, no del ancho fijo. Con el ancho fijo la regla solo acertaba por encima de 1216 px y a 1024 volvian los dos anchos — 452 y 293, medido. El `min()` toma el contenedor cuando es mas estrecho que los 1180, asi que las cinco miden igual a cualquier ancho. */ --syn-ficha: calc( (min(var(--wp--style--global--wide-size), 100%) - 2 * var(--wp--preset--spacing--30)) / 3 ); grid-template-columns: repeat(auto-fit, var(--syn-ficha)); /* CENTRADO. Aqui ponia `start`, y el motivo era que la fila de dos se salia del eje izquierdo del antetitulo y de los titulares de categoria. Ese motivo ya no existe: desde el 03/09/2026 antetitulo, titular y entradilla van centrados en todo el sitio, asi que era la fila de dos la que se quedaba descolgada a la izquierda de su propio rotulo. Centrar NO rompe la familia de las cinco. El ancho de ficha sigue clavado a un tercio del contenedor, asi que las cinco miden lo mismo y la fila de tres llena el ancho entero — en ella `center` no mueve nada. Lo unico que se recoloca es la fila de dos, que es lo que se pedia. */ justify-content: center; } } /* Ver el comentario de `.syn-rejilla`: WordPress pone margen superior a todos los hijos de un grupo menos al primero, y dentro de una rejilla eso descoloca las fichas. Se anula con dos clases para ganarle al CSS de soportes de bloque, que se imprime despues de esta hoja. */ .wp-block-group.syn-metodos > * { margin-block: 0; } .syn-metodo { background-color: var(--wp--preset--color--blanco); border-radius: 12px; padding: var(--wp--preset--spacing--30); box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.04); /* Para que el enlace quede abajo del todo aunque los textos midan distinto y las cinco fichas se lean como una fila ordenada. */ display: flex; flex-direction: column; } .syn-metodo > .wp-block-heading { font-size: var(--wp--preset--font-size--titulo-3); margin-block: 0 0.35rem; text-wrap: balance; } .syn-metodo__foco { font-size: var(--wp--preset--font-size--pequeno); font-weight: 600; color: var(--wp--preset--color--laguna); margin-block: 0 var(--wp--preset--spacing--20); } /* LA ETIQUETA DE «PROXIMAMENTE» DE LAS DOS FICHAS QUE AUN NO SE OFRECEN. Solo la llevan RTT y RTC, que son las unicas sin enlace porque Sophie se certifica en diciembre y a finales de 2027. VA DENTRO DE LA FICHA, NO COLGANDO DEL BORDE. La maqueta de partida la tenia cabalgando la esquina y saliendose; en movil eso se pisa con la ficha de al lado o se sale de la pantalla. Dentro se comporta igual a 320 que a 1.440. `align-self` NO SOBRA. La ficha es una columna flexible, asi que sin esto la pildora se estira a todo el ancho y deja de parecer una etiqueta. EL TEXTO SE GUARDA EN MINUSCULAS y las mayusculas las pone el CSS. Asi un lector de pantalla no lo deletrea y Sophie lo edita escribiendo normal. POR QUE EL TEXTO ES CORTO. Medido el 21/09/2026: dentro de la pildora caben 192 px en el movil de 320, y «Certification in progress · coming soon» mide entre 299 y 321 px segun el idioma. La frase entera no cabe en ninguno de los cuatro, ni bajando a 12 px. Lo que sigue cabe de sobra en una linea. */ .syn-metodo > .syn-metodo__aviso { /* A TODO EL ANCHO DE LA FICHA, no ajustada al texto. La frase entera no cabe en una pildora corta: la ficha mas estrecha del sitio no es la del movil, es la de 1024 px, donde la rejilla pasa a 2+3 y deja 245 px por dentro. A 320 deja 232. `align-self` se quita para que la ficha, que es una columna flexible, la estire de lado a lado ella sola. */ align-self: stretch; text-align: center; margin-block: 0 var(--wp--preset--spacing--20); padding: 0.42em 0.7em; border-radius: 999px; /* EL DORADO DE LA MAQUETA DE LA CLIENTA. Tres paradas y no dos, porque el degradado de la referencia no es plano: arranca en un oliva apagado, sube a un dorado con brillo hacia el centro y se abre al mas claro por la derecha. EL ANILLO VA POR DENTRO, con `box-shadow: inset`, no con `border`. Un borde de 1 px sumaria 2 px de ancho y 2 de alto a la pildora, y el tamano tenia que quedarse exactamente como estaba. CONTRASTE. MEDIDO, no estimado: el blanco sobre la parada mas clara del degradado da 1,87:1, y sobre la mas oscura 2,78:1. El criterio 1.4.3 de las WCAG pide 4,5:1 para texto de este tamano, asi que NO CUMPLE. Se asume a peticion de la clienta, decidido el 21/09/2026. Se deja escrito aqui para que nadie lo tome por un descuido y lo «arregle» sin saber que fue una decision. Si algun dia se quiere cumplir sin perder el dorado, el camino es oscurecer las tres paradas hasta un bronce, no aclarar el texto, que ya es blanco. */ background-image: linear-gradient(100deg, #9E9A7A 0%, #C9A85E 55%, #E2B85C 100%); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); /* 11 px en vez de 13, y la separacion entre letras de 0,08em a 0,06em. MEDIDO el 21/09/2026: con eso la frase entera entra en UNA linea a 390, 430, 768, 1280 y 1440. A 320, 360 y 1024 no entra ni bajando a 10 px, asi que ahi parte en dos lineas, que en una banda de lado a lado se lee bien. `balance` reparte las dos lineas en vez de dejar una coja. */ font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; text-wrap: balance; } .syn-metodo > p { font-size: var(--wp--preset--font-size--pequeno); margin-block: 0; } .syn-enlace-pilar { font-weight: 600; font-size: var(--wp--preset--font-size--pequeno); } .syn-metodo > .syn-enlace-pilar { margin-block: auto 0; padding-top: var(--wp--preset--spacing--30); } .syn-enlace-pilar a { color: var(--wp--preset--color--laguna); text-decoration-thickness: 1px; text-underline-offset: 0.25em; } /*-------------------------------------------------------------- # 14 · Blog --------------------------------------------------------------*/ .entry-title { font-family: var(--wp--preset--font-family--titulos); } .entry-meta { font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--tinta-suave); } /*-------------------------------------------------------------- # 13 ter · Perfiles sociales del pie --------------------------------------------------------------*/ /* MARC LO SACO DEL PIE Y LO PUSO ARRIBA, junto a los idiomas (03/09/2026). El area tactil son 44 px de alto por 40 de ancho, aunque el icono dibujado mida 20. El minimo del criterio 2.5.8 de WCAG son 24 x 24 y el 2.5.5 pide 44 x 44. Aqui se cumple el alto, y el ancho se queda en 40 porque con cuatro idiomas mas el icono, 44 de ancho empuja el menu a dos lineas. Los 40 siguen muy por encima del minimo exigible. Va DETRAS del ultimo idioma para que se lea como otra cosa y no como un quinto idioma. */ /* La altura NO se fija en un numero. Los demas enlaces del menu miden 60 px porque ese es su `line-height`, que sale del personalizador de GeneratePress y puede cambiar. Aqui la entrada estira hasta la altura de la fila, asi que sigue alineada si alguien toca ese ajuste. El minimo de 44 px protege el area tactil por si la fila fuera mas baja. */ .main-navigation .main-nav ul li.syn-red-item { align-self: stretch; display: flex; /* AIRE ANTES DEL ICONO. Los cuatro idiomas van a 7,8 px de relleno cada uno y el icono venia pegado al ultimo, con 0 px de hueco, asi que se leia como un idioma mas de la fila. Con 14 px los idiomas quedan como un grupo y el perfil social como otra cosa. Medido a 1440 — «IT» acaba en 1222 y el icono arrancaba en 1230. */ margin-inline-start: 0.875rem; } .main-navigation .main-nav ul li.syn-red-item > a.syn-red { display: grid; place-items: center; inline-size: 40px; block-size: 100%; min-block-size: 44px; padding: 0; color: var(--wp--preset--color--tinta-suave); transition: color 0.2s ease; } /* El trazo y el punto de la esquina heredan el color del enlace. El `fill` se queda en none a proposito: el dibujo es de contorno. */ .main-navigation .main-nav ul li.syn-red-item > a.syn-red svg { display: block; } .main-navigation .main-nav ul li.syn-red-item > a.syn-red:hover, .main-navigation .main-nav ul li.syn-red-item > a.syn-red:focus-visible { color: var(--wp--preset--color--laguna); } /* En la barra horizontal solo se ve el simbolo. El nombre accesible lo pone el `aria-label` del enlace. */ .main-navigation .main-nav ul li.syn-red-item .syn-red__nombre { display: none; } /* En el panel el menu es una lista vertical de palabras, asi que un icono suelto no se entiende y la palabra se enseña. */ /* Sin el margen de la barra horizontal. Ahi el icono lleva `margin-inline-start: 0.875rem` para separarse de los idiomas; en el panel las filas miden el 100 %, asi que ese margen se sumaba al ancho y sacaba la fila por la derecha. */ .slideout-navigation .main-nav ul li.syn-red-item { margin-inline-start: 0; } .slideout-navigation .main-nav ul li.syn-red-item > a.syn-red { display: flex; align-items: center; justify-content: flex-start; gap: 0.7em; /* A TODO EL ANCHO DE LA FILA. En la barra horizontal el enlace mide 40 px porque es solo el icono; aqui es una fila mas de la lista y su filete tiene que llegar de lado a lado como los demas. Con `auto` se quedaba en 161 px y la raya del final aparecia cortada a media fila. */ inline-size: 100%; block-size: auto; padding: 0.9rem var(--wp--preset--spacing--30); } .slideout-navigation .main-nav ul li.syn-red-item .syn-red__nombre { display: inline; } /*-------------------------------------------------------------- # 15 · Formulario de contacto · PREPARADO Y NO VISIBLE --------------------------------------------------------------*/ /* Lo sirve Contact Form 7. Los cuatro formularios estan creados y configurados, pero NO estan puestos en ninguna pagina publicada. Se activan insertando el patron «Formulario de contacto», sin tocar codigo. POR QUE SE ESTILA AQUI Y NO EN EL PLUGIN. Lo dice su documentacion en `docs-cf7/trucos/styling-contact-form.md` — CF7 no trae opciones de estilo y recomienda la hoja del tema, nunca la del plugin, que se pisa al actualizar. El envoltorio que da para acotar es `.wpcf7`. */ /* EL FORMULARIO, CENTRADO EN SU BLOQUE. Marc lo pidio asi el 04/09 — la caja centrada y los elementos de dentro alineados a la izquierda, como estaban. Se acota aqui, en el envoltorio, y no en cada campo, para que los campos hereden el ancho y no haya que repetirlo. */ .wpcf7 { max-width: 34rem; margin-inline: auto; } /* BLOQUE Y NO FLEX, y conviene dejarlo escrito. Con `display:flex` los saltos de linea de la plantilla del formulario se convierten en ELEMENTOS FLEXIBLES ANONIMOS, cada uno con su altura de linea. Medido: pedia 8 px de hueco entre etiqueta y campo y salian 45, mas otros 37 sobre la etiqueta. En bloque, el espacio en blanco entre etiquetas se ignora y el hueco lo pone el margen. */ .wpcf7 .syn-form__campo { display: block; margin-bottom: var(--wp--preset--spacing--30); max-width: 34rem; } .wpcf7 .syn-form__campo label { /* EN BLOQUE Y CON SU PROPIA INTERLINEA. Como `inline` heredaba el 1,7 del cuerpo a 17 px, asi que la caja de linea medía 29 px para una etiqueta de 15 y sobraban 35 px por arriba. Medido. */ display: block; line-height: 1.4; font-size: var(--wp--preset--font-size--pequeno); font-weight: 700; letter-spacing: 0.04em; color: var(--wp--preset--color--laguna); } /* CF7 envuelve cada control en un `span`, y por defecto es en linea: sin esto el campo no ocupa el ancho de su columna. */ .wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: var(--wp--preset--spacing--10); } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--base); line-height: 1.6; color: var(--wp--preset--color--tinta); background-color: var(--wp--preset--color--blanco); /* SIN BORDE. Lo pidio Marc el 04/09 y es lo unico que se toca aqui. El limite del campo lo hace su relleno blanco contra el salvia de la seccion, que da 1,26:1. ESO NO LLEGA AL 3:1 del criterio 1.4.11, y conviene que quede escrito. Su propia pagina admite el campo sin filete — «Text inputs that have no border and are differentiated only by a background color must have a 3:1 contrast ratio to the adjacent background» — pero pide justo eso, 3:1, y con dos colores claros no se alcanza: blanco contra cualquier fondo claro se queda en torno a 1,2:1. Para recuperarlo hay que oscurecer el fondo de la seccion o devolver el filete. Decision de Marc, anotada aqui para que no parezca un descuido. */ border: 0; border-radius: 12px; padding: 0.75rem 1rem; width: 100%; } .wpcf7 textarea { resize: vertical; min-height: 8rem; } /* EL FOCO, AHORA QUE NO HAY BORDE QUE TENIR. Antes se marcaba cambiando el color del borde. Sin borde hay que sacar el anillo fuera y separarlo, apoyado en el salvia de la seccion, donde el laguna da 5,64:1. Un anillo pegado al canto tendria que contrastar con el blanco de dentro Y con el salvia de fuera a la vez, que es lo que pide la pagina del 1.4.11 para los indicadores que ocupan el borde. */ .wpcf7 input[type="text"]:focus-visible, .wpcf7 input[type="email"]:focus-visible, .wpcf7 textarea:focus-visible { outline: 2px solid var(--wp--preset--color--laguna); outline-offset: 2px; } /* El boton, igual que el resto de botones del sitio. GeneratePress pinta los `input[type=submit]` en gris #55555e desde su CSS dinamico, asi que hay que decirlo aqui. */ .wpcf7 input[type="submit"] { font-family: var(--wp--preset--font-family--texto); font-size: var(--wp--preset--font-size--base); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; color: var(--wp--preset--color--arena-clara); background-color: var(--wp--preset--color--laguna); border: 0; border-radius: 999px; padding: 0.75rem 1.5rem; cursor: pointer; transition: background-color 0.2s ease; } .wpcf7 input[type="submit"]:hover, .wpcf7 input[type="submit"]:focus-visible { background-color: var(--wp--preset--color--laguna-oscura); } /* LA CASILLA DE CONSENTIMIENTO. Obligatoria, y CF7 la marca asi de serie. La casilla y su texto van en linea, con la casilla arriba a la izquierda para que un texto de dos lineas no la descoloque. */ .wpcf7 .syn-form__consentimiento { margin-block: var(--wp--preset--spacing--30) 0; font-size: var(--wp--preset--font-size--pequeno); line-height: 1.5; } .wpcf7 .syn-form__consentimiento .wpcf7-list-item { margin: 0; } .wpcf7 .syn-form__consentimiento label { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; } .wpcf7 .syn-form__consentimiento input[type="checkbox"] { /* 20 px reales y sin encogerse, para que el objetivo tactil no dependa del texto que tiene al lado. */ inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; margin-top: 0.15rem; accent-color: var(--wp--preset--color--laguna); } .wpcf7 .syn-form__consentimiento a { color: var(--wp--preset--color--laguna); text-underline-offset: 0.2em; } .wpcf7 .syn-form__enviar { margin-block: var(--wp--preset--spacing--30) 0; } /* Los avisos de CF7. Vienen con borde de color y margenes propios, y se reescriben para que hablen el idioma visual del sitio. */ .wpcf7 .wpcf7-response-output { max-width: 34rem; margin: var(--wp--preset--spacing--30) 0 0; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); border: 0; border-radius: 12px; font-size: var(--wp--preset--font-size--pequeno); background-color: var(--wp--preset--color--arena); color: var(--wp--preset--color--tinta); } .wpcf7 form.sent .wpcf7-response-output { background-color: var(--wp--preset--color--salvia); color: var(--wp--preset--color--laguna-oscura); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { background-color: var(--wp--preset--color--arena); color: var(--wp--preset--color--coral); } /* El aviso bajo un campo invalido. El coral sobre arena-clara da 4,79:1, medido, asi que cumple 1.4.3 en cuerpo pequeno. */ .wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--aviso); color: var(--wp--preset--color--coral); } .wpcf7 .wpcf7-not-valid { border-color: var(--wp--preset--color--coral); } /*-------------------------------------------------------------- # 16 · El boton de volver arriba --------------------------------------------------------------*/ /* ESTABA A MEDIAS. Medido en la pagina de Reiki: nada mas cargar, con el scroll a cero, el boton salia con `opacity: 0.1` — o sea invisible pero PRESENTE Y PULSABLE, un fantasma en la esquina que capturaba el raton. GeneratePress lo enseña al bajar y lo apaga al subir, pero apagarlo lo deja ahi ocupando sitio. Se apaga de verdad: sin opacidad, sin recibir el raton y fuera del recorrido del tabulador. Cuando GP le pone su clase de visible, vuelve entero. */ a.generate-back-to-top:not(.generate-back-to-top__show) { opacity: 0; pointer-events: none; visibility: hidden; } a.generate-back-to-top.generate-back-to-top__show { opacity: 1; pointer-events: auto; visibility: visible; } /*-------------------------------------------------------------- # 17 · El blog · la galeria de articulos --------------------------------------------------------------*/ /* SE APOYA EN LO QUE YA HAY. La galeria usa `syn-rejilla` y `syn-tarjeta`, las mismas clases que las fichas de Reiki, Chakra y la portada. Aqui abajo solo esta lo que una ficha de articulo tiene y las otras no — la fotografia, la fecha y el enlace de seguir leyendo. Asi el blog no parece una seccion traida de otra web, y el dia que cambie el aspecto de las fichas cambia tambien el del blog sin tocar nada. */ /* EL INTERIOR DE LA GALERIA, AL ANCHO ANCHO. Las plantillas PHP no reciben la clase `wp-container-...` que WordPress genera para los grupos del editor, asi que el ancho se pide por su token. Es el mismo 1.180 px que miden las rejillas de Reiki, Chakra y la portada. */ .syn-blog__interior { max-width: var(--wp--style--global--wide-size); margin-inline: auto; } /* TRES COLUMNAS, NO CUATRO. La rejilla normal parte de 16rem y da cuatro columnas de 277 px. En una ficha de servicio eso vale, pero un titular de articulo lo escribe Sophie y puede ser largo — a 277 px se parten a mitad de palabra, lo mismo que paso en la pagina de precios. Con 20rem de minimo salen tres de 377 en escritorio, dos por debajo de 1200 y una en movil. */ .syn-blog__rejilla { /* `auto-fill`, NO `auto-fit`, y la diferencia se ve con pocas entradas. `auto-fit` colapsa las pistas vacias y reparte el ancho entre las que quedan: con un solo articulo —el caso del italiano hoy— la ficha se estiraba a los 1.180 px de la fila. `auto-fill` mantiene las pistas, asi que una ficha sola mide lo mismo que cuando hay tres. */ grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); /* Todas las fichas de una fila, del alto de la mas alta. */ align-items: stretch; } /* LA FICHA, EN REJILLA, CON EL ENLACE SIEMPRE ABAJO DEL TODO. Los resumenes miden distinto, asi que hay que decidir quien se queda el sobrante de la ficha. Se probaron dos maneras con `flex` y ninguna aguanto la medida: · `margin-block-start: auto` en el enlace — a 1024, dos fichas del MISMO alto resolvian el margen a 40 px una y a 0 la otra · `flex: 1 1 auto` en el resumen — a 1440, dos fichas de 593 px se quedaban con 41 px muertos debajo del enlace y una tercera llenaba Con `grid` no hay nada que repartir ni que resolver: cinco filas declaradas, la del resumen a `1fr` y el enlace en la ultima. Sea cual sea el largo del texto, el enlace cae donde acaba la caja. */ .syn-articulo { display: grid; /* foto · fecha · titulo · resumen · enlace */ grid-template-rows: auto auto auto 1fr auto; /* El relleno lo pone `syn-tarjeta`, pero la foto tiene que llegar a los cantos, asi que se quita y se devuelve elemento a elemento. */ padding: 0; overflow: hidden; } /* Cuando la entrada no lleva imagen destacada hay cuatro hijos, no cinco. Sin esto la primera fila —la de la foto— se quedaria vacia empujando el resto. */ .syn-articulo:not(:has(.syn-articulo__foto)) { grid-template-rows: auto auto 1fr auto; padding-block-start: var(--wp--preset--spacing--30); } /* LOS 40 PX QUE GENERATEPRESS LE METE DEBAJO A CADA ENTRADA. Estan en su hoja principal, `assets/css/main.min.css`: .one-container.blog .post:not(:last-child):not(.is-loop-template-item), .one-container.archive .post:not(:last-child):not(.is-loop-template-item) { padding-bottom: 40px } Tiene sentido en un blog de lista corrida, donde separa una entrada de la siguiente. En una rejilla de fichas es relleno DENTRO de la caja blanca, y por eso el enlace de seguir leyendo quedaba flotando 41 px por encima del fondo. Y explica lo que al medirlo parecia un misterio: el `:not(:last-child)` deja fuera la ULTIMA ficha, asi que el italiano —que solo tiene una entrada— era el unico idioma que salia bien. Se gana por peso y no con `!important`: su selector vale (0,6,0) y este suma una clase mas. */ .one-container.blog .syn-articulo.post:not(:last-child):not(.is-loop-template-item), .one-container.archive .syn-articulo.post:not(:last-child):not(.is-loop-template-item) { padding-bottom: 0; } .syn-articulo > *:not(.syn-articulo__foto) { padding-inline: var(--wp--preset--spacing--30); } /* LA FOTOGRAFIA, A SANGRE POR ARRIBA. Sale del relleno de la tarjeta y se pega a los tres cantos. Las esquinas de abajo se quedan vivas porque debajo sigue habiendo caja. */ .syn-articulo__foto { display: block; margin-block-end: var(--wp--preset--spacing--30); line-height: 0; background-color: var(--wp--preset--color--salvia); } .syn-articulo__foto img { width: 100%; height: auto; /* 3:2 en todas, pase lo que pase con el original. Sophie subira fotos de proporciones distintas y sin esto la rejilla saldria a saltos. */ aspect-ratio: 3 / 2; object-fit: cover; /* Solo arriba: abajo la foto se encuentra con el texto, no con el borde. */ border-radius: 11px 11px 0 0; transition: transform 0.35s ease; } /* Un acercamiento muy corto al pasar por encima. El recorte lo hace la propia tarjeta con su `overflow`. */ .syn-articulo:hover .syn-articulo__foto img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .syn-articulo__foto img { transition: none; } .syn-articulo:hover .syn-articulo__foto img { transform: none; } } /* LA LINEA DE DATOS — fecha · categoria · tiempo de lectura. Va en versalitas pequenas y separada por puntos medios. Los puntos llevan `aria-hidden` en el marcado porque son adorno; un lector de pantalla lee la fecha, la categoria y los minutos sin ruido entre medias. */ .syn-articulo__datos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em; margin-block: 0 var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--aviso); letter-spacing: 0.08em; text-transform: uppercase; /* 5,70:1 sobre el blanco de la tarjeta. Es texto pequeno, asi que se queda por encima del 4,5:1 con margen. */ color: var(--wp--preset--color--tinta-suave); } /* El separador, mas apagado que el dato: es puntuacion, no informacion. */ .syn-articulo__sep { opacity: 0.5; } /* La categoria en el verde de la marca, para que se distinga de la fecha sin necesidad de una caja ni de un color de fondo. */ .syn-articulo__cat { color: var(--wp--preset--color--laguna); font-weight: 700; } .syn-articulo__titulo { margin-block: 0 var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--titulos); font-size: var(--wp--preset--font-size--titulo-3); line-height: 1.25; /* Los titulos los escribe ella y pueden ser largos. `pretty` evita la palabra sola en la ultima linea y, a diferencia de `balance`, no se rinde a partir de seis lineas. */ text-wrap: pretty; } .syn-articulo__titulo a { color: var(--wp--preset--color--tinta); text-decoration: none; } .syn-articulo__titulo a:hover, .syn-articulo__titulo a:focus-visible { color: var(--wp--preset--color--laguna); text-decoration: underline; text-underline-offset: 0.15em; } /* EL RESUMEN ES EL QUE SE ESTIRA, y de ahi sale que el enlace quede abajo. La primera version lo hacia con `margin-block-start: auto` en el enlace y NO era fiable: medido a 1024, dos fichas del mismo alto —611 px las dos, con los mismos hijos y las mismas alturas— resolvian el margen automatico a 40 px una y a 0 la otra, y el enlace de una quedaba 41 px por encima del fondo de su caja. Dandole el sobrante al resumen no hay nada que resolver: el enlace es el ultimo y cae donde acaba la caja. */ .syn-articulo__resumen { margin-block: 0; color: var(--wp--preset--color--tinta-suave); } .syn-articulo__resumen p { margin-block: 0; } /* EL ENLACE, CON UN FILETE ENCIMA. Cuando el resumen es corto, la fila elastica deja un hueco entre el texto y el enlace. Sin nada en medio ese hueco parece un descuido; con el filete se lee como un pie de ficha, que es lo que es. Va al ancho del relleno, no a sangre, para que no compita con el borde de la tarjeta. */ .syn-articulo__mas { margin-block: 0; padding-block: var(--wp--preset--spacing--30); border-block-start: 1px solid rgba(46, 42, 38, 0.08); font-weight: 700; } .syn-articulo__mas a { display: inline-flex; align-items: center; gap: 0.45em; color: var(--wp--preset--color--laguna); text-decoration: none; text-underline-offset: 0.2em; } .syn-articulo__mas a:hover, .syn-articulo__mas a:focus-visible { text-decoration: underline; } /* La flecha avanza un pelo al pasar por encima. Se mueve la flecha y no el texto, para que el punto de lectura no se desplace. */ .syn-articulo__flecha { flex: 0 0 auto; transition: transform 0.25s ease; } .syn-articulo:hover .syn-articulo__flecha, .syn-articulo__mas a:focus-visible .syn-articulo__flecha { transform: translateX(3px); } /* LA FICHA ENTERA SE LEVANTA UN POCO AL PASAR POR ENCIMA. La sombra es la que ya usa el sitio en los testimonios y en las fichas de metodo, no una nueva. En reposo no hay sombra: la rejilla se lee por sus bordes, y una sombra permanente en doce fichas ensucia la pagina. */ .syn-articulo { transition: transform 0.25s ease, box-shadow 0.25s ease; } .syn-articulo:hover, .syn-articulo:focus-within { transform: translateY(-2px); box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.04); } @media (prefers-reduced-motion: reduce) { .syn-articulo, .syn-articulo__flecha { transition: none; } .syn-articulo:hover, .syn-articulo:focus-within { transform: none; } .syn-articulo:hover .syn-articulo__flecha { transform: none; } } /* LA PAGINACION. Solo aparece a partir de la undecima entrada. */ .syn-blog__paginacion { margin-block-start: var(--wp--preset--spacing--50); } .syn-blog__paginacion .nav-links { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); justify-content: center; align-items: center; } .syn-blog__paginacion .page-numbers { display: grid; place-items: center; /* 44 px, por encima de los 24 que pide el criterio 2.5.8 y en el tamano comodo para un dedo. */ min-inline-size: 44px; min-block-size: 44px; padding-inline: 0.5rem; border-radius: 999px; color: var(--wp--preset--color--tinta); text-decoration: none; } .syn-blog__paginacion .page-numbers:hover, .syn-blog__paginacion .page-numbers:focus-visible { background-color: var(--wp--preset--color--salvia); } .syn-blog__paginacion .page-numbers.current { background-color: var(--wp--preset--color--laguna); color: var(--wp--preset--color--arena-clara); font-weight: 700; } /*-------------------------------------------------------------- # 17b · El blog · el articulo --------------------------------------------------------------*/ .syn-entrada__datos { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4em; margin-block: 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--aviso); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tinta-suave); } .syn-entrada__sep { opacity: 0.5; } .syn-entrada__titulo { text-wrap: pretty; } /* LA ENTRADILLA DEL ARTICULO, acotada a la medida de lectura. El titular puede ocupar todo el ancho de contenido porque son pocas palabras y grandes. La entradilla es prosa, y a 680 px se le van las lineas por encima de los 75 caracteres. */ .syn-entrada__cabecera .syn-entradilla { max-width: 34rem; margin-inline: auto; } /* LA MEDIDA DEL ARTICULO, EN UNA SOLA VARIABLE. La usan la fotografia de cabecera, el cuerpo del texto, el enlace de vuelta y el cierre. Antes la foto iba a 52rem y el texto a 40, o sea que la imagen sobresalia 192 px por cada lado y los dos ejes no coincidian. Ahora miden lo mismo y hay un unico numero que tocar. 40rem son 640 px, unos 74 caracteres por linea en castellano. Es el borde comodo de lectura y por eso no se sube mas en tableta ni en movil. */ .syn-entrada { --syn-medida-articulo: 40rem; } /* EN ESCRITORIO, UN PUNTO MAS ANCHA. Pedido por Marc el 06/09. 44rem son 704 px — 64 px mas — y la linea se queda en unos 81 caracteres, que sigue siendo comodo con esta tipografia y este interlineado. Solo a partir de 1024, donde hay sitio de sobra; por debajo manda el ancho del contenedor y subirlo aqui solo apretaria los margenes laterales. */ @media (min-width: 64em) { .syn-entrada { --syn-medida-articulo: 44rem; } } .syn-entrada__foto { margin-block: 0 var(--wp--preset--spacing--50); margin-inline: auto; max-width: min(100%, var(--syn-medida-articulo)); } .syn-entrada__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 5px; } /* LA MEDIDA DE LECTURA. El ancho de contenido del sitio son 680 px, que para un titular esta bien y para un articulo largo es demasiado. Se acota la caja entera y no cada parrafo, para que las listas y las citas caigan en el mismo eje que el texto. */ .syn-entrada__cuerpo { max-width: var(--syn-medida-articulo); margin-inline: auto; } .syn-entrada__cuerpo > * { margin-block: 0 var(--wp--preset--spacing--30); } .syn-entrada__cuerpo > :last-child { margin-block-end: 0; } .syn-entrada__cuerpo h2, .syn-entrada__cuerpo h3 { margin-block-start: var(--wp--preset--spacing--50); } /* EL PRIMER PARRAFO, UN PUNTO MAS GRANDE. Es el recurso de siempre en un articulo — la entrada tira del ojo hacia el texto y marca donde empieza a leerse. Solo el primero, y solo si de verdad es un parrafo: si el articulo abre con un encabezado o una imagen, no aplica. */ .syn-entrada__cuerpo > p:first-child { font-size: var(--wp--preset--font-size--entradilla); line-height: 1.65; color: var(--wp--preset--color--tinta); } /* EL FINAL DEL ARTICULO, MARCADO. Sin nada, el texto y el enlace de vuelta se tocan y no se sabe si el articulo ha terminado o falta algo. Un filete corto y centrado lo cierra sin ruido. */ .syn-entrada__cuerpo::after { content: ""; display: block; inline-size: 4rem; block-size: 1px; margin: var(--wp--preset--spacing--50) auto 0; background-color: var(--wp--preset--color--salvia); } .syn-entrada__cuerpo blockquote { margin-inline: 0; padding-inline-start: var(--wp--preset--spacing--30); border-inline-start: 3px solid var(--wp--preset--color--salvia); font-family: var(--wp--preset--font-family--titulos); font-size: var(--wp--preset--font-size--entradilla); font-style: italic; color: var(--wp--preset--color--tinta-suave); } .syn-entrada__volver { max-width: var(--syn-medida-articulo); margin-block: var(--wp--preset--spacing--50) 0; margin-inline: auto; font-weight: 700; } .syn-entrada__volver a { display: inline-flex; align-items: center; gap: 0.45em; color: var(--wp--preset--color--laguna); text-decoration: none; text-underline-offset: 0.2em; } .syn-entrada__volver a:hover, .syn-entrada__volver a:focus-visible { text-decoration: underline; } /* La flecha retrocede un pelo, al reves que la de la ficha. */ .syn-entrada__volver svg { flex: 0 0 auto; transition: transform 0.25s ease; } .syn-entrada__volver a:hover svg, .syn-entrada__volver a:focus-visible svg { transform: translateX(-3px); } @media (prefers-reduced-motion: reduce) { .syn-entrada__volver svg { transition: none; } .syn-entrada__volver a:hover svg { transform: none; } } /* ANTERIOR Y SIGUIENTE. Dos columnas en escritorio, apiladas en movil, y la de siguiente alineada a la derecha para que se lea como un avance. */ .syn-entrada__vecinas-interior { display: grid; gap: var(--wp--preset--spacing--30); } @media (min-width: 48em) { .syn-entrada__vecinas-interior { grid-template-columns: 1fr 1fr; } .syn-entrada__vecina--sig { grid-column: 2; text-align: right; } } .syn-entrada__vecina { display: block; color: var(--wp--preset--color--tinta); text-decoration: none; } .syn-entrada__vecina-etiqueta { display: block; margin-block-end: 0.25rem; font-size: var(--wp--preset--font-size--aviso); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--laguna); } .syn-entrada__vecina-titulo { display: block; font-family: var(--wp--preset--font-family--titulos); font-size: var(--wp--preset--font-size--entradilla); line-height: 1.3; text-wrap: pretty; } .syn-entrada__vecina:hover .syn-entrada__vecina-titulo, .syn-entrada__vecina:focus-visible .syn-entrada__vecina-titulo { text-decoration: underline; text-underline-offset: 0.15em; }