suelto entre dos secciones. Dos variables de color:
--separador-fondo → color plano de la sección de ARRIBA
--separador-color → color plano de la sección de ABAJO (la forma)
Ejemplo:
Las variantes --espejo invierten la curva (para pasar de claro a oscuro).
Si el navegador no soporta mask, degrada a un corte recto del color de abajo.
------------------------------------------------------------------------- */
.separador {
height: clamp(34px, 4vw, 58px);
background-color: var(--separador-fondo, transparent);
position: relative;
overflow: hidden;
}
.separador::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--separador-color, var(--blanco));
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.separador--onda::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2019.1C9.2%2017%2041.2%208.8%2054.9%206.3C68.5%203.7%2071.8%204.3%2081.9%203.8C92%203.2%20100.8%202.1%20115.2%203.1C129.6%204.2%20150.9%205.9%20168.3%2010.1C185.7%2014.2%20207.9%2024.6%20219.6%2027.9C231.3%2031.3%20233.1%2030.2%20238.5%2030.1C243.9%2030.1%20245.1%2029.7%20252%2027.6C258.9%2025.6%20268.9%2020.9%20279.9%2017.9C290.9%2014.9%20307.9%2011.3%20317.7%209.4C327.4%207.5%20331.1%206.8%20338.4%206.3C345.8%205.8%20355.2%206.2%20361.8%206.6C368.4%207%20373.2%207.3%20378%208.5C382.8%209.7%20385.8%208.7%20390.6%2013.8C395.4%2018.9%20403.1%2034.3%20406.8%2039.2C410.6%2044.2%20410.1%2043.5%20413.1%2043.3C416.1%2043.1%20418.6%2042.4%20424.8%2038C430.9%2033.5%20443.6%2020.9%20450%2016.6C456.4%2012.4%20459.8%2013.2%20463.5%2012.6C467.2%2011.9%20469.8%2012.1%20472.5%2012.6C475.2%2013%20474%2011.2%20479.7%2015.4C485.4%2019.6%20499.4%2033.6%20506.7%2037.7C514%2041.8%20515.4%2039.8%20523.8%2039.9C532.2%2040%20540.5%2040.1%20557.1%2038.3C573.8%2036.5%20597.5%2032.3%20623.7%2029.2C650%2026.1%20676.5%2022.4%20714.6%2019.8C752.7%2017.1%20810.5%2013.6%20852.3%2013.2C894.1%2012.8%20920.5%2014.2%20965.7%2017.6C1010.9%2021%201079.2%2030.1%201123.2%2033.6C1167.2%2037.1%201193.7%2038.2%201229.4%2038.6C1265.1%2039%201302.5%2038.2%201337.4%2036.1C1372.3%2034%201422.2%2027.7%201439.1%2026.1L1440%2058L0%2058Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2019.1C9.2%2017%2041.2%208.8%2054.9%206.3C68.5%203.7%2071.8%204.3%2081.9%203.8C92%203.2%20100.8%202.1%20115.2%203.1C129.6%204.2%20150.9%205.9%20168.3%2010.1C185.7%2014.2%20207.9%2024.6%20219.6%2027.9C231.3%2031.3%20233.1%2030.2%20238.5%2030.1C243.9%2030.1%20245.1%2029.7%20252%2027.6C258.9%2025.6%20268.9%2020.9%20279.9%2017.9C290.9%2014.9%20307.9%2011.3%20317.7%209.4C327.4%207.5%20331.1%206.8%20338.4%206.3C345.8%205.8%20355.2%206.2%20361.8%206.6C368.4%207%20373.2%207.3%20378%208.5C382.8%209.7%20385.8%208.7%20390.6%2013.8C395.4%2018.9%20403.1%2034.3%20406.8%2039.2C410.6%2044.2%20410.1%2043.5%20413.1%2043.3C416.1%2043.1%20418.6%2042.4%20424.8%2038C430.9%2033.5%20443.6%2020.9%20450%2016.6C456.4%2012.4%20459.8%2013.2%20463.5%2012.6C467.2%2011.9%20469.8%2012.1%20472.5%2012.6C475.2%2013%20474%2011.2%20479.7%2015.4C485.4%2019.6%20499.4%2033.6%20506.7%2037.7C514%2041.8%20515.4%2039.8%20523.8%2039.9C532.2%2040%20540.5%2040.1%20557.1%2038.3C573.8%2036.5%20597.5%2032.3%20623.7%2029.2C650%2026.1%20676.5%2022.4%20714.6%2019.8C752.7%2017.1%20810.5%2013.6%20852.3%2013.2C894.1%2012.8%20920.5%2014.2%20965.7%2017.6C1010.9%2021%201079.2%2030.1%201123.2%2033.6C1167.2%2037.1%201193.7%2038.2%201229.4%2038.6C1265.1%2039%201302.5%2038.2%201337.4%2036.1C1372.3%2034%201422.2%2027.7%201439.1%2026.1L1440%2058L0%2058Z'/%3E%3C/svg%3E");
}
.separador--onda-espejo::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2034.9C9.2%2037%2041.2%2045.2%2054.9%2047.7C68.5%2050.3%2071.8%2049.7%2081.9%2050.2C92%2050.8%20100.8%2051.9%20115.2%2050.9C129.6%2049.8%20150.9%2048.1%20168.3%2044C185.7%2039.8%20207.9%2029.4%20219.6%2026.1C231.3%2022.7%20233.1%2023.8%20238.5%2023.9C243.9%2023.9%20245.1%2024.3%20252%2026.4C258.9%2028.4%20268.9%2033.1%20279.9%2036.1C290.9%2039.1%20307.9%2042.6%20317.7%2044.6C327.4%2046.5%20331.1%2047.2%20338.4%2047.7C345.8%2048.2%20355.2%2047.8%20361.8%2047.4C368.4%2047%20373.2%2046.7%20378%2045.5C382.8%2044.3%20385.8%2045.3%20390.6%2040.2C395.4%2035.1%20403.1%2019.7%20406.8%2014.8C410.6%209.8%20410.1%2010.5%20413.1%2010.7C416.1%2010.9%20418.6%2011.6%20424.8%2016C430.9%2020.5%20443.6%2033.1%20450%2037.4C456.4%2041.6%20459.8%2040.8%20463.5%2041.4C467.2%2042.1%20469.8%2041.9%20472.5%2041.4C475.2%2041%20474%2042.8%20479.7%2038.6C485.4%2034.4%20499.4%2020.4%20506.7%2016.3C514%2012.2%20515.4%2014.2%20523.8%2014.1C532.2%2014%20540.5%2013.9%20557.1%2015.7C573.8%2017.5%20597.5%2021.7%20623.7%2024.8C650%2027.9%20676.5%2031.6%20714.6%2034.2C752.7%2036.9%20810.5%2040.5%20852.3%2040.8C894.1%2041.2%20920.5%2039.8%20965.7%2036.4C1010.9%2033%201079.2%2023.9%201123.2%2020.4C1167.2%2016.9%201193.7%2015.8%201229.4%2015.4C1265.1%2015%201302.5%2015.8%201337.4%2017.9C1372.3%2020%201422.2%2026.3%201439.1%2027.9L1440%2058L0%2058Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2034.9C9.2%2037%2041.2%2045.2%2054.9%2047.7C68.5%2050.3%2071.8%2049.7%2081.9%2050.2C92%2050.8%20100.8%2051.9%20115.2%2050.9C129.6%2049.8%20150.9%2048.1%20168.3%2044C185.7%2039.8%20207.9%2029.4%20219.6%2026.1C231.3%2022.7%20233.1%2023.8%20238.5%2023.9C243.9%2023.9%20245.1%2024.3%20252%2026.4C258.9%2028.4%20268.9%2033.1%20279.9%2036.1C290.9%2039.1%20307.9%2042.6%20317.7%2044.6C327.4%2046.5%20331.1%2047.2%20338.4%2047.7C345.8%2048.2%20355.2%2047.8%20361.8%2047.4C368.4%2047%20373.2%2046.7%20378%2045.5C382.8%2044.3%20385.8%2045.3%20390.6%2040.2C395.4%2035.1%20403.1%2019.7%20406.8%2014.8C410.6%209.8%20410.1%2010.5%20413.1%2010.7C416.1%2010.9%20418.6%2011.6%20424.8%2016C430.9%2020.5%20443.6%2033.1%20450%2037.4C456.4%2041.6%20459.8%2040.8%20463.5%2041.4C467.2%2042.1%20469.8%2041.9%20472.5%2041.4C475.2%2041%20474%2042.8%20479.7%2038.6C485.4%2034.4%20499.4%2020.4%20506.7%2016.3C514%2012.2%20515.4%2014.2%20523.8%2014.1C532.2%2014%20540.5%2013.9%20557.1%2015.7C573.8%2017.5%20597.5%2021.7%20623.7%2024.8C650%2027.9%20676.5%2031.6%20714.6%2034.2C752.7%2036.9%20810.5%2040.5%20852.3%2040.8C894.1%2041.2%20920.5%2039.8%20965.7%2036.4C1010.9%2033%201079.2%2023.9%201123.2%2020.4C1167.2%2016.9%201193.7%2015.8%201229.4%2015.4C1265.1%2015%201302.5%2015.8%201337.4%2017.9C1372.3%2020%201422.2%2026.3%201439.1%2027.9L1440%2058L0%2058Z'/%3E%3C/svg%3E");
}
.separador--arco::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2054C420%200%201020%200%201440%2054L1440%2058L0%2058Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2054C420%200%201020%200%201440%2054L1440%2058L0%2058Z'/%3E%3C/svg%3E");
}
.separador--arco-espejo::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200C420%2054%201020%2054%201440%200L1440%2058L0%2058Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200C420%2054%201020%2054%201440%200L1440%2058L0%2058Z'/%3E%3C/svg%3E");
}
.separador--diagonal::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2035L1440%200L1440%2058L0%2058Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2035L1440%200L1440%2058L0%2058Z'/%3E%3C/svg%3E");
}
.separador--diagonal-espejo::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200L1440%2035L1440%2058L0%2058Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2058'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200L1440%2035L1440%2058L0%2058Z'/%3E%3C/svg%3E");
}
/* ----------------------------------------------------------------------------
19 · RESPONSIVE
----------------------------------------------------------------------------
La tipografía y los paddings de sección ya son fluidos con clamp();
aquí solo cambia lo estructural: columnas y excepciones.
------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.seccion__cabecera { gap: 32px 48px; }
.cierre__interior { gap: 48px; }
.pregunta { gap: 12px 40px; }
.cierre__logotipo { max-width: 320px; }
}
@media (max-width: 768px) {
.rejilla--2,
.rejilla--3,
.rejilla--4 { grid-template-columns: minmax(0, 1fr); }
.seccion__cabecera,
.pregunta,
.formulario-lineas__fila,
.cierre__interior { grid-template-columns: minmax(0, 1fr); }
.cierre__interior { gap: 40px; }
.cierre__logotipo { max-width: 240px; }
.pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* La navegación se apila; el menú plegable, si llega, va en la plantilla */
.cabecera-sitio__interior { padding: 14px 0; gap: 16px 28px; }
.lista-filas__fila { flex-wrap: wrap; }
/* La curva grande a ancho de móvil resulta desproporcionada */
:root { --curva-grande: 72px; }
}
@media (max-width: 480px) {
:root {
--seccion-x: 24px;
--curva-grande: 56px;
--curva-media: 32px;
}
.pie__rejilla { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.formulario-lineas__acciones { align-items: flex-start; flex-direction: column; }
.boton { width: 100%; }
.cabecera-sitio .boton,
.cierre .boton { width: auto; }
}
/* -------------------------------------------------------------------------
Separadores: combinaciones listas
El separador necesita saber de qué color viene y a cuál va. Con los valores
por defecto (transparente sobre blanco) queda invisible, así que estas clases
cubren los cortes que se dan de verdad en el sitio y evitan declarar las dos
variables a mano en cada plantilla.
------------------------------------------------------------------------- */
.separador--claro-a-oscuro {
--separador-fondo: var(--hueso);
--separador-color: var(--rama-profundo);
}
.separador--oscuro-a-claro {
--separador-fondo: var(--rama-base);
--separador-color: var(--blanco);
}
.separador--blanco-a-hueso {
--separador-fondo: var(--blanco);
--separador-color: var(--hueso);
}
.separador--hueso-a-blanco {
--separador-fondo: var(--hueso);
--separador-color: var(--blanco);
}
/* Respuesta del formulario, la pinta form-rediseno.js tras enviar */
.formulario-lineas__respuesta {
margin: 24px 0 0;
padding: 16px 20px;
border-left: 3px solid var(--rama-base);
background: var(--rama-tinte, #F1F4F6);
font-size: 1rem;
line-height: 1.6;
outline: none;
}
.formulario-lineas__respuesta[data-estado="error"] {
border-left-color: #A94436;
background: #FBF2F0;
}
/* =========================================================================
MOVIMIENTO
Reglas que me he impuesto, por orden de importancia:
1. El contenido NUNCA se oculta esperando a que algo lo revele. Todo el
texto está visible por defecto; la animación solo se activa dentro de
@supports (animation-timeline: view()), así que si el navegador no la
soporta no pasa nada: se ve igual, sin saltos y sin huecos en blanco.
Esto es lo que evita que una animación cueste posiciones.
2. Sin JavaScript. Nada de IntersectionObserver ni de librerías: son
animaciones dirigidas por scroll, resueltas por el compositor.
3. Solo `transform` y `opacity`, que no provocan reflow ni repintado.
4. prefers-reduced-motion manda: quien lo pida no ve ni un movimiento.
5. Poco recorrido y rápido. Esto es la web de una logopeda, no un portfolio:
el movimiento acompaña la lectura, no la interrumpe.
========================================================================= */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
/* Entrada de bloque: sube 18 px y aparece.
El rango termina en `entry`, no en `cover`: así el elemento está del todo
opaco en cuanto ha acabado de entrar en la ventana. Con `cover` se queda
a medio camino mientras no scrollees, y lo que asoma por el borde de
abajo al cargar se ve descolorido sin que nadie lo haya pedido. */
@keyframes entra {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
.seccion__cabecera,
.cabecera-pagina > *,
.banda-oscura > .contenido > *,
.lista-filas__fila,
.pregunta,
.cierre__texto {
animation: entra linear both;
animation-timeline: view();
animation-range: entry 0% entry 60%;
}
/* Las tarjetas entran con un desfase pequeño entre columnas: da sensación
de rejilla que se compone, sin que la última se haga esperar. */
.rejilla > *,
.tarjetas > * {
animation: entra linear both;
animation-timeline: view();
animation-range: entry 0% entry 55%;
}
.rejilla > *:nth-child(2),
.tarjetas > *:nth-child(2) { animation-range: entry 5% entry 62%; }
.rejilla > *:nth-child(3),
.tarjetas > *:nth-child(3) { animation-range: entry 10% entry 69%; }
.rejilla > *:nth-child(4),
.tarjetas > *:nth-child(4) { animation-range: entry 15% entry 76%; }
/* La cifra de la banda oscura crece un pelo: es el dato que sostiene la
sección y merece el único gesto con algo de amplitud del sitio. */
@keyframes crece {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: none; }
}
.banda-oscura__cifra {
animation: crece linear both;
animation-timeline: view();
animation-range: entry 0% entry 70%;
}
/* Las ilustraciones y los retratos, un poco más lentos que el texto:
el ojo llega antes a la palabra que al dibujo.
La imagen de la cabecera queda FUERA a propósito: es la que marca el LCP
y lleva fetchpriority="high". Animarle la opacidad es pedirle al
navegador que pinte tarde justo lo que le hemos dicho que pinte antes. */
.retrato img,
.seccion figure img {
animation: entra linear both;
animation-timeline: view();
animation-range: entry 0% entry 80%;
}
}
/* Micro-interacciones. Estas sí van siempre: no dependen del scroll y no
ocultan nada, solo responden al puntero y al teclado. */
.tarjeta {
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tarjeta:hover,
.tarjeta:focus-within {
transform: translateY(-4px);
box-shadow: 0 14px 34px rgba(34, 53, 63, .10);
}
.boton { transition: transform .2s ease, background-color .25s ease, color .25s ease; }
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
/* El enlace de «ver el servicio» empuja su flecha al pasar por encima */
.tarjeta__enlace,
.lista-filas__flecha { transition: transform .25s ease; }
.tarjeta:hover .lista-filas__flecha,
.lista-filas__fila:hover .lista-filas__flecha { transform: translateX(4px); }
/* Los enlaces de texto subrayan de dentro hacia fuera */
.prosa a,
.seccion p a {
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
text-decoration: none;
transition: background-size .3s ease;
}
.prosa a:hover,
.seccion p a:hover,
.prosa a:focus-visible,
.seccion p a:focus-visible { background-size: 100% 1px; }
}
/* =========================================================================
MÓVIL: CABECERA COMPACTA Y OBJETIVOS TÁCTILES
Medido el 13-ago-2026 en producción con un viewport real, no con capturas.
No hay menú plegable a propósito (serían seis enlaces detrás de un clic y
JavaScript que ahora no hace falta), pero sin él la cabecera se comía 220 px
a 360, o sea una cuarta parte de la pantalla antes del primer titular.
========================================================================= */
/* El objetivo táctil mínimo es 24x24 CSS px (WCAG 2.2, 2.5.8). Los enlaces
dentro de un párrafo están exentos por la excepción de texto en línea; los
de la navegación y el pie no lo están, y medían 19 px de alto. El padding
los sube sin mover nada de sitio: el hueco entre ellos ya lo absorbe. */
.cabecera-sitio__enlace,
.pie__lista a,
.pie__legal a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
/* también el ancho: «Voz», en el menú de categorías del blog, se quedaba en
22 px por ser una palabra corta. */
min-width: 24px;
padding: 4px 0;
}
.pie__lista { line-height: 1.75; }
/* La casilla de la política se sube a 24 px en el