/* Theme Name: Avanza Asesores 2025 Theme URI: https://avanzasesores.com Description: Tema hijo de Twenty Twenty-Five para Avanza Asesores. Paleta beis clara con la tinta como único tono oscuro. Casi todo el aspecto vive en theme.json. Author: Avanza Asesores Template: twentytwentyfive Version: 0.2 License: GPL v2 or later Text Domain: avanza-2025 */ /* Aquí solo va lo que theme.json no sabe expresar. Los colores, las tipografías, la escala y los espacios están allí: si buscas un color, no lo busques en este archivo. */ /* Titulares equilibrados. ----------------------- Sin esto, un titular de tres líneas deja la última con una sola palabra colgando. `balance` reparte las líneas para que queden parecidas; es de las pocas propiedades que mejoran un texto sin tocar el texto. */ h1, h2, h3, .wp-block-heading { text-wrap: balance; } /* Los párrafos, con `pretty`: no arregla el reparto entero, pero evita la línea huérfana al final. */ p { text-wrap: pretty; } /* Foco visible, siempre. ---------------------- Requisito de accesibilidad y de sentido común: quien navega con el tabulador tiene que saber dónde está. Se usa :focus-visible y no :focus para que el anillo no salte al pulsar con el ratón. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 3px; border-radius: 2px; } /* Los anclas de encabezado no se quedan pegadas al borde superior al saltar a ellas desde un índice o desde una dirección con almohadilla. */ :target, h2[id], h3[id] { scroll-margin-top: calc(var(--av-cabecera) + 2rem); } /* En táctil, sin el retardo de 300 ms que algunos navegadores dejan por si viene un doble toque. */ a, button, .wp-block-button__link { touch-action: manipulation; } /* Números en columna alineados: importa en los precios y en las fechas del calendario fiscal. */ table, .wp-block-table { font-variant-numeric: tabular-nums; } /* Nada de texto que desborde su caja por una palabra larga —un correo, una URL— en pantallas estrechas. */ p, li, h1, h2, h3, td { overflow-wrap: break-word; } /* Transiciones: solo las propiedades que el navegador puede animar sin recalcular la página, y ninguna para quien ha pedido que no se mueva nada. */ /* El botón de contorno, del mismo tamaño que el macizo. * * WordPress le da al estilo de contorno un relleno propio —`calc(0.667em + 2px)` * y `calc(1.333em + 2px)`— que NO hereda el de theme.json. Resultado medido: el * macizo salía a 60px de alto y el de contorno a 64, con 5px más de relleno * lateral. Con los dos dentro de la banda no cantaba; solos sobre el fondo claro, * sí. * * Se le resta el píxel del borde para que el tamaño exterior coincida: la caja * es border-box, así que 0.9rem de relleno más 1px de filo mide más que 0.9rem * a secas. * * Los valores son los mismos que pone theme.json en `styles.elements.button` * (ver bin/paleta-2025.py). Si se cambian allí, hay que cambiarlos aquí. */ .wp-block-button.is-style-outline > .wp-block-button__link { padding: calc(0.9rem - 1px) calc(1.9rem - 1px); } /* Los dos botones bajo la banda, del mismo ancho. Sin esto los mide su texto: «Reservar cita» salía a 176px y «Llámanos: 603 929 404» a 278, y dos llamadas del mismo rango con tamaños distintos se leen como si una fuera menos importante que la otra. */ .av-botones-iguales .wp-block-button__link { min-width: 17.5rem; text-align: center; } /* El botón del mapa lo pinta el plugin; solo hay que separarlo de las dos columnas que tiene encima. El centrado y el ancho van en las clases que ya trae de fábrica. La clase es suya y no `.av-botones-iguales.alignwide`, que era lo que había: con eso el margen alcanzaba también a los botones del héroe —comparten las dos clases— y les metía 48px de más por arriba. */ .wp-block-buttons.av-boton-mapa { margin-top: var(--wp--preset--spacing--40); } @media (max-width: 460px) { /* A 375 quedan 327px útiles: el mínimo de 17.5rem no cabe con margen, así que cada botón se lleva una fila entera. El ancho hay que ponerlo en el CONTENEDOR del botón, no en el enlace: el contenedor se encoge a su texto, así que un `min-width: 100%` en el enlace se calcula sobre una caja ya encogida y no hace nada. */ .av-botones-iguales .wp-block-button { flex: 1 1 100%; } .av-botones-iguales .wp-block-button__link { display: block; min-width: 0; } } /* -------------------------------------------------------- el movimiento --- */ /* Solo movimiento de respuesta: nada aparece al hacer scroll ni se mueve solo. * * Una animación de entrada retrasa la lectura del contenido y en una web de * servicios no aporta nada; lo que sí falta en una web sin movimiento es la * sensación de que los controles responden. Todo lo de aquí abajo reacciona a * algo que hace quien visita —pasar por encima, enfocar, pulsar un enlace del * índice— y nada dura más de 0.2s: por encima de eso se percibe como lentitud, * no como suavidad. * * Todo queda desactivado por el bloque de prefers-reduced-motion de más abajo, * que ya estaba. */ /* El salto del índice de servicios deja de ser un corte. El scroll-margin de los titulares (arriba, en h2[id]) es lo que evita que el titular quede pegado al borde al llegar. */ html { scroll-behavior: smooth; } /* Los enlaces del texto llevan el subrayado apagado y se enciende al pasar. Sigue viéndose en reposo —hace falta para saber que es un enlace— pero deja de competir con el texto en un párrafo con tres o cuatro. */ a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color 0.18s ease, text-decoration-color 0.18s ease, text-underline-offset 0.18s ease; } .entry-content a:not(.av-cta):not(.wp-block-button__link) { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } .entry-content a:not(.av-cta):not(.wp-block-button__link):hover, .entry-content a:not(.av-cta):not(.wp-block-button__link):focus-visible { text-decoration-color: currentColor; text-underline-offset: 0.24em; } /* El botón se levanta un pelo y vuelve al pulsarlo. Un solo píxel: lo justo para que se note que es una pieza y no un rectángulo pintado. */ .wp-block-button__link, .av-cta { transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .wp-block-button__link:hover, .av-cta:hover { transform: translateY(-1px); } .wp-block-button__link:active, .av-cta:active { transform: translateY(0); } /* Las tarjetas. * ------------- * Qué es una tarjeta en esta web se decide aquí y en ningún otro sitio: el * tono, el radio y el aire de dentro. Antes cada bloque llevaba esos tres * valores escritos a mano en sus atributos —quince copias entre la portada, el * blog, contacto y la ficha del autor— y bastaba con retocar una para que * dejara de parecerse a las demás. Ahora llevan la clase y ya está. * * Lo que esta regla NO fija es el tamaño. El ancho lo pone la rejilla que las * contiene —cuatro columnas en servicios, dos en el blog, tres en el proceso— * y el alto, el texto que llevan dentro. Una tarjeta que necesite otro relleno * puede declararlo en su bloque: un estilo en línea gana a esta clase. */ .av-tarjeta { position: relative; padding: 2rem; border-radius: 16px; background: var(--wp--preset--color--blanco); transition: transform 0.18s ease, box-shadow 0.18s ease; } /* Todas reaccionan al pasar por encima, lleven enlace o no. * * Aquí había antes un `:has(a)` que se lo reservaba a las que llevan a algún * sitio, con el argumento de que una tarjeta que se levanta promete un clic que * no existe. El argumento no era malo pero el resultado sí: en la misma pantalla * convivían tarjetas vivas y tarjetas muertas con la misma pinta, y eso se lee * como una avería, no como una distinción. El movimiento aquí dice «esto es una * pieza», y lo que promete el clic es el subrayado de abajo, que solo aparece * donde hay enlace. * * La sombra va en el tono de la tinta, no en negro: sobre un fondo cálido un * gris neutro se ve sucio. */ .av-tarjeta:hover, .av-tarjeta:focus-within { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(33, 26, 23, 0.12); } /* Al pasar se subraya lo que se puede leer como destino: el titular y el * enlace del final. Si la tarjeta lleva dos —las del blog, con la categoría * encima del titular— se subrayan los dos, porque las dos llevan a un sitio. * * El titular solo se subraya cuando la tarjeta entera lleva a un sitio. En las * de contacto, que no van a ninguna parte pero tienen dentro el teléfono y el * correo, se subraya el enlace y el titular se queda quieto: no hay que * prometer un clic donde no lo hay. * * Los botones se quedan fuera: ya tienen su propio gesto, y un botón subrayado * parece un enlace roto. */ .av-tarjeta-enlace:hover :is(h2, h3, h4), .av-tarjeta-enlace:focus-within :is(h2, h3, h4), .av-tarjeta:hover a:not(.wp-block-button__link):not(.av-cta), .av-tarjeta:focus-within a:not(.wp-block-button__link):not(.av-cta) { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.18em; } /* Las que tienen un destino único se clican enteras, que es lo que convierte el * efecto en verdad y no en decoración: sin esto la tarjeta se levanta pero hay * que acertarle al renglón de abajo. * * Se estira solo el enlace de destino —el titular de la entrada, o el «Ver…» * que cierra la tarjeta de servicio—, no cualquier enlace: en una tarjeta con * varios, cada uno tendría su capa a pantalla completa y ganaría el último, * que es justo el que no quieres. Por eso la clase se pone a mano donde * corresponde y no la deduce un `:has(a)`: las de contacto llevan teléfono y * correo, y ahí cada enlace tiene que seguir siendo el suyo. */ .av-tarjeta-enlace .wp-block-post-title a::after, .av-tarjeta-enlace > p:last-child a::after { content: ""; position: absolute; inset: 0; } /* La tarjeta que termina en botón: el botón al pie y centrado. * * Es el mismo problema que el «Ver…» de más abajo y la misma solución. En * contacto las seis tarjetas siguen el mismo patrón —título, descripción y una * acción— y sus descripciones no miden lo mismo, así que sin esto los botones * de una fila quedaban a alturas distintas y la simetría se perdía justo en lo * que se mira, que es dónde hay que pulsar. * * El centrado lo declara el propio bloque de botones en su maquetación; aquí va * también por si alguno se pega sin ella. */ .av-tarjeta:has(> .wp-block-buttons:last-child), .av-tarjeta:has(> .av-horario-estado:last-child) { display: flex; flex-direction: column; gap: 1.2rem; } .av-tarjeta:has(> .wp-block-buttons:last-child) > *, .av-tarjeta:has(> .av-horario-estado:last-child) > * { margin: 0; } .av-tarjeta > .wp-block-buttons:last-child { margin-top: auto; justify-content: center; } /* El icono manda un poco menos de aire que el resto: va pegado a su titular. */ .av-tarjeta:has(> .wp-block-buttons:last-child) > .av-icono, .av-tarjeta:has(> .av-horario-estado:last-child) > .av-icono { margin-bottom: -0.45rem; } /* Cuatro tarjetas van siempre de dos en dos, nunca tres y una suelta. * * La rejilla de WordPress reparte por ancho mínimo: mete las columnas que * quepan. Con cuatro tarjetas eso sale bien en los dos extremos —cuatro en una * pantalla ancha, una debajo de otra en el móvil— y mal justo en medio: en una * tablet en vertical caben tres, y la cuarta se queda sola en una fila, * arrinconada a la izquierda. No es un fallo de nadie, es lo que hace * `auto-fill`, y no se puede evitar eligiendo mejor el ancho mínimo porque para * llegar a cuatro columnas siempre hay que pasar antes por tres. * * Se fija a dos, que con cuatro tarjetas siempre cuadra, y por debajo de 600 se * apilan. El selector lleva `.entry-content` delante para pesar más que la * clase que WordPress le pone al contenedor de la rejilla. */ .entry-content > .av-dos-en-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 599px) { .entry-content > .av-dos-en-dos { grid-template-columns: minmax(0, 1fr); } } /* El «Ver…» se va al pie de la tarjeta. * * Las tarjetas de una fila miden todas lo que la más alta, pero su contenido * cae desde arriba: con descripciones de distinto largo, el enlace de cada una * acababa a una altura distinta —26px de diferencia entre «Asesoría laboral» y * sus vecinas— y la fila se leía descuadrada aunque las cajas estuvieran * alineadas. * * El `margin-top: auto` se come el hueco sobrante y lo deja abajo del todo. Se * lo damos solo a las tarjetas que terminan en un párrafo con enlace: las del * blog terminan en el extracto o en la fecha, y ahí bajar el último renglón al * suelo dejaría un agujero en medio. * * Al pasar a flex los márgenes dejan de colapsar entre hermanos, así que el * aire lo pone `gap` y los márgenes propios se ponen a cero. Por eso el titular * de estas tarjetas no lleva margen en línea: lo pisaría. */ .av-tarjeta-enlace:has(> p:last-child a) { display: flex; flex-direction: column; gap: 1.2rem; } .av-tarjeta-enlace:has(> p:last-child a) > * { /* Los cuatro márgenes, no solo los de arriba y abajo. * * La maquetación «constrained» de WordPress le pone a cada hijo * `margin-left: auto; margin-right: auto` para centrar la columna de lectura. * En flujo normal eso no hace nada dentro de una tarjeta —el hijo ya ocupa * todo el ancho—, pero en una caja flex un margen automático se come el hueco * sobrante: el titular se encogía a lo que mide su texto y se iba al centro. * Las cinco tarjetas de /servicios/ salían con el título centrado y el resto * a la izquierda. * * Los márgenes automáticos vienen con `!important`, así que no se ganan desde * aquí: se quitan en el origen, dando a esas tarjetas maquetación de flujo * normal en vez de «constrained». Una tarjeta no necesita que le limiten la * medida de lectura, que para eso ya es estrecha. */ margin: 0; } .av-tarjeta-enlace:has(> p:last-child a) > p:last-child { margin-top: auto; } /* Los demás enlaces de la tarjeta del blog —la categoría y «Seguir leyendo»— tienen que seguir siendo clicables por su cuenta, así que se levantan por encima de la capa estirada. */ .av-tarjeta-enlace .wp-block-post-terms a, .av-tarjeta-enlace .wp-block-post-excerpt a { position: relative; z-index: 1; } /* La tarjeta de sociedades, bajo las cuatro de servicios: ocupa el ancho de las dos columnas y va centrada, para que se lea como el cierre del bloque y no como un párrafo que se quedó descolgado (observación de Alba, 19/09/2026). El texto no pasa de 60 caracteres por línea aunque la tarjeta sea ancha. */ .av-tarjeta-ancha { text-align: center; align-items: center; } .av-tarjeta-ancha > * { max-width: 60ch; margin-inline: auto; } /* Los enlaces del índice se desplazan al pasar, que es la manera de señalar dónde está el cursor en una lista sin subrayar cuatro líneas seguidas. */ .av-indice a { display: inline-block; transition: transform 0.18s ease, color 0.18s ease; } .av-indice a:hover, .av-indice a:focus-visible { transform: translateX(3px); } /* En el índice el realce va por enlace, no por tarjeta: son cuatro o seis seguidos, y subrayarlos todos a la vez al pasar por la tarjeta no señala nada. Aquí el que se mueve es el que está bajo el cursor. */ .av-indice:hover a, .av-indice:focus-within a { text-decoration: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Objetivos táctiles de la cabecera. --------------------------------- Medidos: 26px de alto los enlaces del menú y 22 la marca. El mínimo cómodo en táctil son 44: por debajo, acertar con el dedo es cuestión de suerte, y eso lo paga sobre todo quien tiene poco pulso o dedos grandes. Se gana con relleno, no agrandando la letra, para no engordar la cabecera. */ header .wp-block-navigation-item__content, header .wp-block-site-title a { /* Se gana el alto con relleno, no con min-height. Con min-height hacía falta además convertir el enlace en caja flex para centrar el texto, y ese display no llegaba a aplicarse: el enlace seguía siendo `block`, así que la caja medía 44px pero el texto se quedaba pegado arriba. Resultado medido: el menú 9px más alto que la marca y el botón, que sí coincidían entre sí. Con relleno simétrico el texto queda centrado por construcción, sin depender de que se aplique ningún display. */ display: inline-block; padding-block: 9px; } /* La medida de línea la fija la rejilla, no cada bloque. ------------------------------------------------------ Aquí hubo un max-width por bloque y fue peor el remedio: en una maquetación centrada, dos bloques con medidas distintas se centran cada uno por su lado y sus bordes izquierdos dejan de coincidir. La medida se controla desde contentSize en theme.json, que es lo que WordPress usa para colocar. */ /* La medida de lectura la fija contentSize en theme.json, no reglas de aquí. ------------------------------------------------------------------------- Aquí hubo un bloque que limitaba el ancho de párrafos y titulares con max-width y márgenes. Se quitó: peleaba con la maquetación de bloques de WordPress, que también coloca esos elementos, y el resultado eran cuatro bordes izquierdos distintos en la misma pantalla —justo lo contrario de lo que buscaba—. Con una sola columna en theme.json, WordPress lo alinea todo solo y no hace falta ni una línea de CSS. */ /* Nota para la próxima vez que algo "no se aplique". ------------------------------------------------- Aquí hubo una regla que estiraba las filas de la cabecera y del pie al 100%. No hacía falta: el desajuste venía de que WordPress cachea el CSS que genera a partir de theme.json, y estaba sirviendo el ancho viejo (1160) mientras el archivo ya decía 760. Cabecera y pie salían más anchos que el contenido. Se arregla con: wp transient delete --all && wp cache flush Conviene tenerlo presente antes de escribir CSS correctivo: varias vueltas de ajustes que "no surtían efecto" eran esto, no el CSS. */ /* «Abierto ahora», resaltado. * * Lo pinta el navegador (avanza-nucleo/assets/js/horario.js) y hasta ahora * salía como un párrafo más, indistinguible del horario que tiene encima. Es el * único dato de la página que cambia según el momento en que se mire, y es * justo el que se busca: pasa a una pastilla en Hueso sobre la Piedra de la * tarjeta, que es el contraste que ya usa el resto de la web para destacar algo * dentro de una tarjeta. * * Abierto y cerrado se distinguen por el punto —relleno o hueco— y, sobre todo, * por el texto, que lo dice con todas las letras. Nada depende del color: no * hay verde ni rojo, primero porque esta paleta no los tiene, y segundo porque * un estado que solo se lea por el color no lo lee todo el mundo (WCAG 1.4.1). */ .av-horario-estado { display: inline-flex; /* Dentro de la tarjeta, que es una caja flex, `inline-flex` se convierte en `flex` y la pastilla se estiraba a los 504px de ancho de la columna. Con `align-self` vuelve a medir lo que mide su texto, y de paso se centra como los botones de las demás tarjetas. */ align-self: center; align-items: center; gap: 0.5rem; margin-block: 0.35rem 0; /* Misma receta de caja que un botón de tarjeta —relleno de 0.9rem, texto de 0.9375rem e interlineado 1.75—, así que mide exactamente lo mismo de alto sin que haya que escribir el número en ningún sitio. El relleno lateral sí es más corto: es una etiqueta, no algo que se pulse. */ padding: 0.9rem 1.25rem; border-radius: 999px; background: var(--wp--preset--color--base); font-size: 0.9375rem; font-weight: 700; line-height: 1.75; } /* En una tarjeta de móvil no caben los 34 caracteres en una línea: la pastilla partía en dos y se convertía en un pegote de 81px de alto. Ahí no hay ningún botón al lado con el que casar la altura —las tarjetas van apiladas—, así que se le puede recortar la letra y el relleno sin perder nada. */ @media (max-width: 480px) { .av-horario-estado { padding-inline: 0.9rem; font-size: 0.8125rem; } } /* Segundo escalón, para las pantallas de 360: con 13px seguía partiendo por ocho píxeles. El corte va en 370 y no en 380 para que los 375 del iPhone SE se queden en el escalón de arriba, donde ya caben. Por debajo de 340 vuelve a partir y se deja así: para que cupiera habría que recortar el texto, y ese lo escribe el navegador. */ @media (max-width: 370px) { .av-horario-estado { padding-inline: 0.65rem; font-size: 0.75rem; } } .av-horario-estado::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border: 2px solid currentColor; border-radius: 50%; } .av-horario-abierto::before { background: currentColor; } /* El horario de siempre, encima de la pastilla: se apoya menos, porque el dato que se busca es el de abajo. */ .av-horario { margin-bottom: 0; } /* La pastilla se va al pie de su tarjeta, en el sitio donde las demás llevan su * botón. Esa tarjeta no lleva ninguno —su llamada sería «reservar cita» y ya * hay una tarjeta para eso—, y sin esto el hueco quedaba todo abajo y la fila * se leía descuadrada. * * Ya no hace falta compensar nada: midiendo las dos lo mismo, con pegarlas al * mismo borde inferior quedan alineadas. */ .av-tarjeta > .av-horario-estado:last-child { margin-top: auto; margin-bottom: 0; } /* El icono de las tarjetas de contacto. ------------------------------------ Un círculo con el icono dentro. Va aquí y no en theme.json porque theme.json describe la paleta y la escala, no piezas sueltas. */ .av-icono { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 0.9rem; border-radius: 50%; background: var(--wp--preset--color--base); color: var(--wp--preset--color--accion); } /* Dentro de una tarjeta el titular no necesita el tope de medida de la columna principal: la tarjeta ya es estrecha. Y arranca pegado al borde de arriba, sin el margen que llevaría en medio de un texto. Vale para las tarjetas que son columna y para las que son grupo: cuando esto se escribió solo había de las primeras. */ .wp-block-column > .wp-block-heading, .av-tarjeta > .wp-block-heading { margin-block: 0 0.5rem; max-width: none; } /* El pie, pegado abajo en las páginas cortas. ------------------------------------------ Medido en el blog, que con dos entradas ocupa 1057px: en una ventana de 1600 el pie terminaba a esa altura y dejaba 543px en blanco por debajo. No es que el pie fuera grande —mide 123px en todas las páginas— es que flotaba a media pantalla con un vacío detrás. La estructura de un tema de bloques es .wp-site-blocks conteniendo header, main y footer, así que basta con que esa caja ocupe la ventana entera y que el contenido se lleve el espacio sobrante. */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; } .wp-site-blocks > main { flex: 1 0 auto; } /* Sin hueco entre la cabecera, el contenido y el pie. * * WordPress separa los bloques de primer nivel con el `blockGap` global, 1.2rem. * Entre dos zonas del mismo color no se nota, pero la portada abre y cierra con * banda de avena y esos 19px salían como una franja clara: la banda no llegaba * ni al filo de la cabecera ni al del pie. * * Se quita aquí y no en theme.json a propósito. El `blockGap` de theme.json es * el mismo que separa los párrafos dentro del contenido: ponerlo a cero allí * apelmazaría todos los textos de la web para arreglar dos franjas. * * La regla de WordPress va con :where(), que no puntúa, así que un selector con * una clase le gana sin necesidad de !important. */ .wp-site-blocks > * { margin-block-start: 0; } /* Piezas del contenido que vienen del plugin o de los archivos de contenido. ------------------------------------------------------------------------- No son bloques del editor, así que theme.json no las alcanza: llevan clase propia y se les da forma aquí. Al cambiar de tema se habían quedado sin ningún estilo —la entradilla igual que un párrafo cualquiera, las preguntas frecuentes sin separación y la nota de revisión sin recuadro. */ /* Entradilla: el primer párrafo de cada página, un punto mayor. */ .av-entradilla { font-size: 1.2rem; line-height: 1.6; color: var(--wp--preset--color--contrast); } /* Nota de trabajo interno: está para que moleste hasta que alguien la resuelva y la borre, pero solo a quien puede resolverla. A quien no ha iniciado sesión se le quita del HTML —ver avanza-nucleo/inc/notas-internas.php—, así que este estilo solo lo ve el equipo. El filo la marca como lo que es: un recado, no contenido de la página. */ .av-revisar { padding: 1rem 1.25rem; border-left: 3px solid var(--wp--preset--color--accion); background: var(--wp--preset--color--blanco); font-size: 0.95rem; } /* Preguntas frecuentes: cada una en su desplegable. * * Eran veintidós titulares con su párrafo debajo repartidos en cinco páginas, y * un muro de preguntas cansa antes de encontrar la propia. Plegadas, la lista * entera se lee de un vistazo y se abre solo la que importa. * * Es `
` del navegador, no un acordeón de JavaScript: funciona sin * scripts, el buscador de la página (Cmd+F) encuentra el texto de dentro y lo * abre, y el teclado ya sabe manejarlo sin que haya que declarar roles. */ .av-faq details { border-top: 1px solid var(--wp--preset--color--borde); } .av-faq details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--borde); } .av-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; cursor: pointer; font-size: 1.125rem; line-height: 1.4; /* Fuera el triángulo del navegador: se dibuja el nuestro más abajo. El `list-style` es para Firefox y el pseudo-elemento para Safari. */ list-style: none; } .av-faq summary::-webkit-details-marker { display: none; } /* La flecha. Dibujada con dos bordes girados en vez de con un icono: son dos líneas de CSS, hereda el color del texto y no hay archivo que cargar. */ .av-faq summary::after { content: ""; flex: none; width: 0.5em; height: 0.5em; margin-bottom: 0.2em; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 0.2s ease; } .av-faq details[open] summary::after { transform: rotate(-135deg); margin-bottom: -0.2em; } .av-faq summary:hover { text-decoration: underline; } /* El foco de la pregunta se marca subrayando, no con el recuadro de siempre. * * El navegador le pone el anillo de foco a un `` también cuando se * pulsa con el ratón —no solo con el teclado, como hace con un enlace—, así que * abrir una pregunta dejaba un rectángulo alrededor hasta pulsar en otro sitio. * * Hay que apagarlo en `:focus`, no solo en `:focus-visible`. El primer intento * fue con `:focus-visible` y no sirvió de nada: si el anillo lo dibuja el * navegador en el foco a secas, esa regla ni siquiera llega a aplicarse. El * recuadro seguía ahí. * * Apagarlo y ya está no vale: quien navega con el teclado necesita ver dónde * está. Por eso el subrayado se declara aparte, en `:focus-visible`, que es el * caso del teclado: señala igual de bien en una línea de texto y no dibuja una * caja. Es el mismo gesto que al pasar por encima, y eso es correcto: las dos * cosas dicen «esto se puede pulsar». */ .av-faq summary:focus, .av-faq details:focus { outline: none; } .av-faq summary:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .av-faq details > p { margin-block: 0 1.25rem; max-width: 60ch; } /* Llamada a la acción del final de cada servicio, y de cada entrada. */ /* Las tarjetas se definen por su tono y su aire, no por un filo. * * docs/paleta.md avisaba de que sin el filo desaparecerían, porque avena contra * leche se quedan en 1.25 de contraste. El número es correcto y la conclusión * no: 1.25 es poquísimo para leer un texto, pero entre dos superficies grandes * y planas el escalón de tono se ve de sobra. Comprobado quitándolo. * * El radio pasa de 8 a 16px. Un radio pequeño y uniforme es la firma de * Bootstrap y de toda la década pasada; y con Fraunces, que tiene remates * suaves, una esquina generosa rima mejor. */ /* La llamada del final va centrada en el ancho que tenga la página. * * Con el lateral —de 1100px para arriba— se centra cruzando las dos columnas, * y eso se declara en la regla de la rejilla. Por debajo no hay rejilla, y ahí * se quedaba pegada al borde izquierdo: a 1024 la tarjeta medía 704 en un * contenedor de 961 y empezaba en el mismo sitio que el texto. Centrada se lee * como lo que es, el cierre de la página, y no como un párrafo más. */ .av-entrada-cta { margin-top: 3rem; } /* El `!important` no es pereza: para que el carril vaya alineado a la izquierda, WordPress emite `margin-left: 0 !important` sobre cada hijo del contenido, y eso se come cualquier margen automático. Es el mismo `!important` contra el que ya se chocó al montar los rieles. Con `body` delante, la regla pesa más que la suya y gana. */ body .entry-content > .av-entrada-cta { margin-inline: auto !important; } /* En una entrada la llamada cuelga de `main` y no del contenido, así que se centra sola —main centra lo que no va a ancho completo— y lo único que le falta es el hueco de arriba. */ body main > .av-entrada-cta { margin-top: clamp(3rem, 2rem + 4.2vw, 5.5rem); } .av-entrada-cta-titulo { margin-block: 0 0.5rem; } .av-entrada-cta .av-cta, .av-cta { display: inline-block; margin-top: 0.75rem; padding: 0.9rem 1.9rem; /* El mismo radio que los botones del tema, que lo pone theme.json. Aquí hay que repetirlo porque este botón no es un bloque: lo pinta el plugin. */ border-radius: 8px; /* Las variables las emite theme.json. Antes esto apuntaba al slug `accion`, que era el color del botón mientras botón y enlaces coincidían. Al pasar la acción a mocha dejaron de coincidir y este CTA —el que el plugin inyecta al final de las páginas de servicio— se quedó en carbón mientras los del tema ya eran mocha, sin que nada fallara. */ background: var(--av-boton); color: var(--av-boton-letra); font-weight: 700; text-decoration: none; } /* El botón, centrado en la tarjeta. Va con márgenes automáticos y `display: block` en vez de con `text-align`: así se centra la caja del botón, no el renglón, y el ancho lo sigue poniendo su relleno. Con `text-align: center` habría que centrar también el texto de arriba, y ese se lee mejor alineado a la izquierda. */ .av-entrada-cta .av-cta { display: block; width: fit-content; margin-inline: auto; margin-top: 1.25rem; } .av-cta:hover, .av-cta:focus { background: var(--av-boton-activo); color: var(--wp--preset--color--base); } /* Otros servicios: el enlazado interno entre las cinco páginas. */ .av-relacionados { margin-top: 3rem; } .av-relacionados-titulo { margin-block: 0 0.75rem; font-size: 1.2rem; } .av-relacionados-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; } /* La tarjeta es el enlace. No lleva el `::after` estirado de las demás porque no hay nada dentro que estirar: el enlace ya ocupa la tarjeta entera. */ .av-relacionados-tarjeta { display: flex; align-items: center; min-height: 5.5rem; font-weight: 700; text-decoration: none; } .av-relacionados-tarjeta:hover, .av-relacionados-tarjeta:focus-visible { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.18em; } /* ---------------------------------------------------------------- el pie --- */ /* Etiquetas: los rótulos pequeños que van encima de un titular. * * Van en versalitas y espaciadas porque tienen que leerse como etiquetas, no * como titulares. El interletrado abierto es lo que hace legible un texto en * mayúsculas a tamaño pequeño; sin él, las mayúsculas se apelmazan. * * Ojo: estos párrafos NO llevan la clase has-small-font-size. Las clases de * tamaño que genera WordPress salen con !important, así que le ganarían a este * font-size y los rótulos volverían a 15px sin que nada avisara. */ .av-etiqueta { margin-block: 0 1rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 0.75rem; } /* En el contenido, la etiqueta se apoya en un filo que cruza el carril ancho. * * Un solo elemento hace de separador de sección y de rótulo, que es mejor que * dos: un
aparte y una etiqueta debajo se descuadran en cuanto alguien * mueve uno de los dos. * * El filo va en Taupe porque en esta paleta Taupe es el color de las líneas —el * mismo de los filos de las tarjetas—, y porque con 2.79 sobre el fondo se ve * sin llegar a pesar. No lleva color propio: hereda el del cuerpo, que es el * tono medio de la paleta, así que queda por debajo del titular sin tener que * fijarlo aquí. Si el texto cambia de tono, la etiqueta lo sigue. */ main .av-etiqueta { border-top: 1px solid var(--wp--preset--color--borde); padding-top: 1.25rem; } /* Salvo cuando la sección viene justo después de una banda de color: ahí el borde de la banda ya hace de separador, y un filo a dos centímetros de él son dos líneas seguidas diciendo lo mismo. */ /* La etiqueta que viene justo debajo de una banda de color pierde el filo: el borde de la banda ya hace de separador, y un filo a dos centímetros de él son dos líneas seguidas diciendo lo mismo. Conserva el `padding-top`, que es lo que la hace colgar del borde exactamente igual que colgaba del filo. Sin él se pega a la banda y el hueco deja de coincidir con el de las demás secciones. */ main .av-etiqueta-sin-filo { border-top: 0; } /* Dentro de una tarjeta no hay nada de lo que colgar: la tarjeta ya está delimitada por su relleno, así que ni filo ni hueco. */ /* La entradilla queda con el mismo aire arriba que abajo. * * La portada de la página termina en un filo y deja 64px hasta la entradilla; * el filo de la primera etiqueta se le pegaba al renglón siguiente sin nada en * medio. El párrafo quedaba colgando del de arriba en vez de respirar entre dos * líneas, que es lo que hace la página. * * Es el mismo clamp que el margen inferior de `.av-portada-pagina`: los dos * huecos son el mismo hueco y tienen que encoger a la vez. */ main .av-entradilla + .av-etiqueta { margin-top: clamp(2rem, 1.3rem + 3vw, 4rem); } main .av-tarjeta .av-etiqueta { border-top: 0; padding-top: 0; } /* El pie es una lista de datos sueltos, no prosa: interlineado más corto y los párrafos pegados entre sí. Con el 1.75 del cuerpo, cuatro enlaces seguidos ocupan lo que una sección. */ footer .wp-block-column p { margin-block: 0 0.35rem; line-height: 1.6; } /* La salida de un atajo la envuelve wpautop en un

PELADO, sin las clases del bloque: el `fontSize` que se le pone al bloque de atajo no llega al HTML. Sin esto, la dirección y el teléfono salían a 17px entre vecinos de 15. El :not([class]) es a propósito: así solo alcanza a esos párrafos sueltos y no le gana por especificidad al has-large-font-size del nombre. */ footer .wp-block-column p:not([class]) { font-size: var(--wp--preset--font-size--small); } /* En el pie los enlaces van sin subrayar: son una lista de navegación, y cuatro subrayados seguidos ensucian. Se subrayan al pasar y al enfocar, que es cuando hace falta saber que son enlaces. */ footer a { text-decoration: none; } footer a:hover, footer a:focus-visible { text-decoration: underline; } /* El texto de los enlaces del pie mide 19px de alto y WCAG 2.5.8 pide un área de toque de 24. El relleno vertical de un elemento EN LÍNEA crece hacia fuera de su línea sin separarla, así que el área llega a 25px y la maquetación no se mueve. Con 30px entre líneas no llegan a solaparse. No se usa display:inline-block, que sería lo obvio: el correo es largo y en una columna estrecha necesita poder partirse entre dos líneas. */ footer .wp-block-column a { padding-block: 3px; } /* El logotipo del pie usa la variante clara del archivo, no la oscura con un filtro: el trazo es fino y cualquier inversión por CSS lo emborrona. */ .wp-block-image.av-marca-pie { margin: 0 0 0.75rem; } .wp-block-image.av-marca-pie img { display: block; width: 140px; height: auto; } .av-pie-legal { row-gap: 0.75rem; } .av-pie-legal p { margin-block: 0; } /* ------------------------------------------------ las páginas interiores --- */ /* Las migas hacen de etiqueta de página. * * En la portada la etiqueta de sección es un rótulo escrito a mano. Aquí no * hace falta inventarlo: las migas ya dicen dónde estás, y puestas encima del * titular ocupan exactamente ese sitio. Se les quita el peso —salían a 17px y * subrayadas, compitiendo con el titular— y se quedan en tamaño de etiqueta. * * El subrayado vuelve al pasar y al enfocar, que es cuando hace falta saber que * son enlaces. */ .av-migas { margin-block: 0 0.75rem; font-size: var(--wp--preset--font-size--small); line-height: 1.5; } .av-migas a { text-decoration: none; } /* Las migas son texto, no botones, y su caja se ajusta a la palabra: a 360 * «Blog» salía en 29×20, por debajo de los 44×44 del mínimo táctil (WCAG * 2.5.5). Con `padding` de sobra y el mismo valor en negativo en `margin` la * caja real —la que mide el navegador y la que se puede pulsar— crece a * 44+; el hueco que ocupan entre sí las migas y con lo de abajo no se * entera, porque el margen negativo cancela justo lo que añade el relleno. * * El relleno no se reparte igual arriba que abajo (revisado el 20/09/2026): * casi todo va en `padding-top`, y `padding-bottom` se deja mínimo. Repartido * a partes iguales, como antes, la caja crecía lo mismo hacia abajo que * hacia arriba —12,8px, el resultado de 0,8rem— y en la entrada esos 12,8px * de más se comían el hueco hasta el titular, que aquí es un `

` y no * otro enlace: un toque que caía en esa franja abría la categoría en vez de * no hacer nada. Arriba de las migas no hay nada que tapar —es lo primero * de la página—, así que ahí no hay ese riesgo y se le puede cargar casi * todo el relleno. */ .av-migas a { display: inline-block; padding: 1.1rem 0.55rem 0.25rem; margin: -1.1rem -0.55rem -0.25rem; } .av-migas a:hover, .av-migas a:focus-visible { text-decoration: underline; } /* La categoría sobre el titular de la entrada —«Fiscal», «Sociedades»— es el * bloque de WordPress «Términos de la entrada» y le pasa lo mismo que a las * migas: a 360 salía en 42×20. Mismo arreglo, y el mismo reparto desigual * (ver el comentario de `.av-migas a` aquí arriba): en la entrada individual * (`single.html`) este es el último elemento antes del `

` del titular, a * un solo `margin-bottom` de por medio —el hueco más corto de los tres * elementos de la cabecera de la entrada—, así que es donde más importaba * quitarle relleno de abajo. En las tarjetas del blog, donde va encima de * otro título más pequeño y el hueco es mayor, este reparto no cambia nada * a ojos vistas: sigue midiendo lo mismo por dentro. */ .wp-block-post-terms a { display: inline-block; padding: 1.1rem 0.55rem 0.25rem; margin: -1.1rem -0.55rem -0.25rem; } /* El filo bajo la cabecera de página: marca dónde acaba la portada de la página y empieza el texto. Cruza el carril ancho, como las etiquetas de sección. */ /* El titular de la página no se mide con la vara del texto. * * La portada va en el carril ancho pero su maquetación es «constrained», así * que WordPress le pone a cada hijo el tope de 640px de la columna de lectura. * A un párrafo eso le viene bien; a un titular de 64px no: «Asesoría para * autónomos» ocupa 713px y partía en dos renglones de 389 y 324, y un titular * partido a media palabra no se lee como una decisión. * * Un titular no es texto seguido: no hay medida de lectura que proteger, hay * una línea que leer de un vistazo. Se le quita el tope y cabe en el carril * ancho. Sigue partiendo cuando de verdad no cabe, que es lo que pasa en móvil. */ .av-portada-pagina .wp-block-post-title, .av-portada-pagina h1 { max-width: none; } .av-portada-pagina { margin-bottom: clamp(2rem, 1.3rem + 3vw, 4rem); padding-bottom: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem); border-bottom: 1px solid var(--wp--preset--color--borde); } /* Aquí estuvo la indentación del cuerpo. * * A 1440px, un párrafo de 640 pegado al borde del carril deja 520px de vacío a * su derecha. La solución era indentar el cuerpo 300px y dejar el titular * colgando en el borde: se llenaba el ancho sin tocar la medida de lectura. * * Funcionaba en un portátil y no en una pantalla de ordenador: allí el párrafo * no llenaba nada, se quedaba flotando en medio de la página sin nada que lo * justificara. Un texto indentado sin margen que lo sostenga se lee como un * error de maquetación, no como una decisión. * * Ahora ese hueco lleva contenido —el lateral con el índice y la reserva, en * `avanza-nucleo/inc/lateral.php`— y el cuerpo vuelve al mismo borde izquierdo * que los titulares, la navegación y las tarjetas. Las páginas que no llevan * lateral son las que ya llenan el ancho por su cuenta: contacto y el blog son * rejillas de tarjetas y reservar cita es un formulario. */ /* El ritmo dentro de una página larga. * * En la portada el ritmo lo dan los rellenos de cada sección. Aquí no hay * secciones: hay un texto seguido con titulares dentro, así que el ritmo tiene * que salir del espacio ANTES de cada h2. Sin esto, un h2 de 34px separado del * párrafo anterior por el interlineado normal no se lee como el principio de * nada. * * El filo va sólo en los h2 y no en los h3: si lo llevaran los dos, una página * de servicio saldría con nueve líneas horizontales y parecería una tabla. */ .entry-content > h2 { margin-top: clamp(3rem, 2rem + 4.2vw, 5.5rem); padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-top: 1px solid var(--wp--preset--color--borde); } .entry-content > h3 { margin-top: clamp(2rem, 1.6rem + 1.7vw, 3rem); } /* La marca de la cabecera. * * El logotipo es un monograma ALTO —proporción 1:0.67—, no un lockup * horizontal, y eso obliga a elegir en una barra de navegación: o la cabecera * crece, o la marca encoge hasta que «AVANZA ASESORES» deja de leerse. * * El logotipo de 2026 es casi cuadrado —proporción 0.92— porque el rótulo va * DEBAJO del monograma, no cruzándolo como en el anterior. Eso lo hace más alto * a igual ancho, pero también lo salva: a tamaño pequeño el rótulo sigue * leyéndose como una banda de texto en vez de emborronarse sobre el trazo. * * A 90px son 83 de alto y la cabecera se queda en 99, casi lo que medía antes. * Más grande se come la primera pantalla; más pequeño y «AVANZA ASESORES» deja * de distinguirse. */ .wp-block-image.av-marca { margin: 0; } .wp-block-image.av-marca img { display: block; width: 90px; height: auto; } /* --------------------------------------------------------- la cabecera --- */ /* La cabecera acompaña al hacer scroll. * * `sticky` y no `fixed`: así sigue ocupando su sitio en el flujo y no hay que * compensar su alto con un relleno en el contenido, que es de donde salen la * mitad de los descuadres con las barras fijas. * * Funciona dentro de `.wp-site-blocks`, que es un flex en columna, porque el * contenedor de referencia de un `sticky` es su ancestro con scroll y ese es la * página entera. * * El fondo es imprescindible: sin él, el texto de la página se vería por debajo * al pasar. Ya lo trae del bloque (`backgroundColor: base`). * * --av-cabecera es su alto, y lo usan otras dos cosas que tienen que esquivarla: * el `scroll-margin` de los titulares con id —para que al saltar desde el índice * no queden ocultos detrás— y el `top` del lateral pegajoso de los servicios. * Si cambia el alto de la cabecera, cambia aquí y las tres cosas se enteran. */ :root { --av-cabecera: 109px; } .wp-site-blocks > header { position: sticky; top: 0; z-index: 20; } @media (max-width: 700px) { :root { --av-cabecera: 84px; } /* La cabecera se partía en dos filas: el nombre arriba, y debajo el menú y el botón. Medido a 375px, el nombre (126) más el menú (24) más el botón (164) más los huecos pasaban de los 327 disponibles. Lo que sobra es el botón, que llevaba el relleno de escritorio: 30px a cada lado para un texto de 15. Con el relleno recortado y el hueco interior a 1rem, la cabecera cabe en una fila hasta en pantallas de 360. */ header .wp-block-button__link { padding-inline: 1.1rem; padding-block: 0.65rem; } header .wp-block-navigation { --wp--style--block-gap: 1rem; } .wp-block-image.av-marca img { width: 68px; } } @media (max-width: 420px) { /* Segundo escalón, para pantallas de 360. Medido: con el nombre y el botón un punto más pequeños, la cabecera cabe en una fila desde 360px de ancho, que es el móvil más estrecho que se usa hoy. Por debajo —320px, un iPhone SE de primera generación— vuelve a partirse en dos filas, y se deja así a propósito: para que cupiera habría que recortar el margen lateral de la cabecera, y entonces el nombre del despacho dejaría de caer a plomo sobre el texto de la página. Dos filas no es un fallo; un borde descuadrado sí se ve. El tamaño va en el , no en el
del bloque: la clase has-small-font-size de WordPress lleva !important, pero está en el div padre, así que basta con declararlo en el hijo para ganarle. */ .wp-block-image.av-marca img { width: 62px; } header .wp-block-button__link { padding-inline: 0.9rem; font-size: 0.875rem; } } /* ------------------------------------------------------ el menú de arriba --- */ /* El foco del menú no deja recuadro al pulsar con el ratón. * * Es exactamente lo que pasaba con las preguntas frecuentes, y por el mismo * motivo: WordPress pinta tres