. Cada uno lleva lo que le daba su etiqueta antes (fuente, interlineado, text-wrap), para que nada se mueva. */ h1.hero-shunku-marca { font-family: var(--font-body); line-height: inherit; text-wrap: pretty; } p.hero-shunku-titulo { text-wrap: balance; } /* Lo mismo en las interiores (hub, categorías, fichas, Sobre mí, Bonos, Contacto): shunku_titular_h1() en inc/shunku.php. El titular
recibe lo que le daba la regla h1 de main.css y el antetítulo-h1 lo que le daba el
, con :where() para pesar lo mismo que la etiqueta: cualquier clase
(.servicio-titulo, .contacto--mapa-ancho .section-title…) sigue mandando
igual que mandaba sobre el h1. */
p:where(.shunku-titular) { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
h1:where(.eyebrow) { font-family: var(--font-body); font-weight: 600; line-height: inherit; letter-spacing: normal; text-wrap: pretty; }
.hero-shunku-marca::before,
.hero-shunku-marca::after {
content: ""; height: 1px; width: clamp(28px, 9vw, 88px);
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-ink) 70%, transparent));
}
/* Los filetes se desvanecen hacia FUERA, igual que en la placa de la
clienta: la línea nace del texto y se pierde. Una línea de opacidad plana
se lee como un subrayado; esta, como un grabado. */
.hero-shunku-marca::after { background: linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 70%, transparent), transparent); }
.hero-shunku-titulo {
font-family: var(--font-display);
/* Peso 400: Marcellus solo existe en una variante y pedirle negrita hace
que el navegador la finja engordando el trazo, que en una romana se ve
emborronado. La presencia la da el tamaño y el espaciado, no el peso. */
font-weight: 400;
text-transform: uppercase;
font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.5rem);
line-height: 1.06;
letter-spacing: .045em;
color: var(--color-primary);
margin: 0 auto var(--space-6);
max-width: 18ch;
text-wrap: balance;
}
.hero-shunku-sub {
font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
line-height: 1.65;
/* Tinta al 90%, no el taupe de los textos secundarios: sobre el cobre,
--color-muted se queda por debajo de 3:1. */
color: color-mix(in srgb, var(--color-ink) 90%, transparent);
max-width: 52ch;
margin: 0 auto var(--space-10);
}
/* Botón de contorno, no macizo: sobre un fondo de luz, un botón sólido pesa
demasiado y rompe la calma que construye todo lo demás. */
.btn-shunku {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-block;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 16px 40px;
text-decoration: none;
transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
/* Al pasar el ratón, el botón se hace de cobre: el metal entra fundiéndose y
su brillo cruza de derecha a izquierda, como la luz rasante sobre la placa.
Fundido y NO barrido, a propósito: con un barrido, media etiqueta pasa un
instante de un color de texto al otro sobre el fondo equivocado. Así el
texto y el metal cambian a la vez en toda la superficie. */
.btn-shunku::before,
.btn-primary::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background: var(--metal-cobre-texto);
background-size: 240% 100%;
background-position: 100% 0;
opacity: 0;
transform: none;
transition: opacity var(--duration-base) var(--ease-out), background-position 700ms var(--ease-out);
}
.btn-shunku:is(:hover, :focus-visible)::before,
.btn-primary:is(:hover, :focus-visible)::before { opacity: 1; background-position: 0 0; }
.btn-shunku:is(:hover, :focus-visible) { color: var(--color-ink); border-color: var(--color-cobre-tinta); }
.btn-primary:is(:hover, :focus-visible) { color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
.btn-shunku::before, .btn-primary::before { transition: opacity var(--duration-base) linear; background-position: 30% 0; }
}
.hero-shunku.tiene-foto .hero-shunku-titulo,
.hero-shunku.tiene-foto .hero-shunku-marca { color: var(--color-on-primary); }
.hero-shunku.tiene-foto .hero-shunku-sub { color: color-mix(in srgb, var(--color-on-primary) 85%, transparent); }
.hero-shunku.tiene-foto .btn-shunku { color: var(--color-on-primary); border-color: currentColor; }
.hero-shunku.tiene-foto .btn-shunku:is(:hover, :focus-visible) { color: var(--color-ink); border-color: transparent; }
/* Sobre la placa, el botón no puede fundirse a cobre al pasar el ratón: sería
cobre sobre cobre y no se notaría que ha reaccionado. Se invierte a
espresso con el texto en cobre claro — la pastilla de la placa, rellena. */
.hero-shunku.sin-foto .btn-shunku::before { background: var(--color-primary); }
.hero-shunku.sin-foto .btn-shunku:is(:hover, :focus-visible) { color: var(--color-cobre-claro); border-color: var(--color-primary); }
.hero-shunku-scroll {
position: absolute; left: 50%; bottom: var(--space-8);
transform: translateX(-50%); z-index: 2;
}
.hero-shunku-scroll span {
display: block; width: 1px; height: 56px;
background: linear-gradient(180deg, transparent, var(--color-ink));
animation: shunku-respira 2.8s ease-in-out infinite;
transform-origin: top;
}
@keyframes shunku-respira {
0%, 100% { transform: scaleY(.45); opacity: .35; }
50% { transform: scaleY(1); opacity: .9; }
}
/* ── MANIFIESTO ──────────────────────────────────────────────────────
Una frase sola en pantalla. Todo el trabajo lo hace el aire de alrededor:
si esta sección estuviera apretada, la frase no pesaría.
------------------------------------------------------------------- */
/* Lino, no el blanco roto de antes: entre dos placas de cobre, una banda
blanca era el color más frío de la página y se leía como un hueco. Ahora
es el lino del suelo con la luz de la placa de arriba cayéndole encima —
un reflejo cobrizo que nace del borde del hero y se apaga hacia abajo —,
así que las dos secciones empalman en vez de cortarse. */
.manifiesto {
background:
radial-gradient(75% 90% at 50% 0%, color-mix(in srgb, var(--color-cobre-medio) 30%, var(--color-cobre-suave)) 0%, transparent 70%),
var(--color-bg);
}
.manifiesto-cuerpo {
padding-block: clamp(var(--space-20), 12vw, var(--space-24));
text-align: center;
max-width: 860px;
}
.manifiesto-simbolo { display: block; color: var(--color-accent); margin-bottom: var(--space-8); }
.manifiesto-corazon { width: 46px; height: 46px; margin: 0 auto; }
.manifiesto-frase {
font-family: var(--font-display);
font-weight: 400;
/* Más grande: es la promesa de la marca y la frase que más se recuerda de
la portada. "Más caro" es menos elementos y más grandes. */
font-size: clamp(1.7rem, 1rem + 2.9vw, 3.3rem);
line-height: 1.26;
color: var(--color-primary);
margin: 0;
text-wrap: balance;
}
.manifiesto-firma {
margin: var(--space-8) 0 0;
font-size: var(--text-xs);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--color-muted);
}
/* ── LA MIEL ─────────────────────────────────────────────────────────
Asimétrica y sangrando por la derecha. La base compone todo centrado o en
dos mitades iguales; esto rompe el eje a propósito, porque es la sección
que tiene que destacar sobre las demás.
------------------------------------------------------------------- */
.miel {
position: relative;
isolation: isolate;
/* La banda es la placa de la clienta: cobre cepillado a sangre, con la
tinta encima. Es el único bloque de la web que va entero en metal, y por
eso es este — el diferencial tiene que ser lo que más brilla de la
página. Antes era un melocotón plano (--color-cobre-suave): ni se leía
como cobre ni se distinguía del resto de tintes pálidos.
Va la versión del metal SIN sombra (--metal-cobre-texto), porque aquí
hay texto encima: su punto más oscuro es el cobre y la tinta da 4.8. El
foco de arriba repite la luz rasante de la placa sobre la marca. */
background:
radial-gradient(60% 70% at 22% 0%, color-mix(in srgb, var(--color-cobre-claro) 45%, transparent) 0%, transparent 60%),
linear-gradient(100deg,
var(--color-accent) 0%, var(--color-cobre-medio) 13%, var(--color-cobre-claro) 26%,
var(--color-cobre-medio) 37%, var(--color-accent) 49%, var(--color-accent) 100%);
overflow: hidden;
/* Los bordes de la placa, grabados como el del hero. La foto se apoya
encima y tapa el de su mitad, que es justo lo que haría un objeto puesto
sobre una placa. */
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--color-cobre-tinta) 60%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--color-cobre-tinta) 60%, transparent);
/* Contenedor de consulta para que .miel-texto pueda calcular el margen del
contenedor con 100cqi. Es el ancho real de la banda, sin la barra de
scroll: con 100vw el calculo se desviaba los ~15 px que ocupa la barra. */
container-type: inline-size;
}
/* El cepillado: hilos horizontales finísimos, claros y oscuros alternos, y
el mismo grano del hero. Sin esto el degradado se lee como un relleno de
CSS; con esto, como un material. Va en ::before, POR DEBAJO del contenido
(z-index -1 dentro del isolation de .miel): encima se habría comido
también la foto. */
.miel::before {
content: "";
position: absolute; inset: 0; z-index: -1;
pointer-events: none;
background:
repeating-linear-gradient(0deg,
color-mix(in srgb, var(--color-cobre-claro) 22%, transparent) 0 1px, transparent 1px 3px,
color-mix(in srgb, var(--color-cobre-tinta) 10%, transparent) 3px 4px, transparent 4px 6px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
}
/* El sangrado se hacia con un margin negativo calculado a ojo y la foto se
salia 321 px de la ventana: el cazo y el hilo de miel —lo unico que la
foto tenia que contar— quedaban fuera de pantalla. Ahora la seccion deja
de ser un contenedor centrado y pasa a dos columnas a sangre: la de texto
lleva el margen del contenedor como padding y la de la foto llega al borde
exacto de la ventana, ni un pixel mas. */
.miel-rejilla {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
align-items: stretch;
max-width: none;
padding: 0;
}
.miel-texto {
/* box-sizing: content-box y no el border-box global. Las 52ch son de TEXTO,
no de caja: con border-box el padding del sangrado (que en una pantalla
de 1900 px pasa de 450 px sumando los dos lados) se comia el ancho hasta
dejar la columna en una palabra por linea. Asi el maximo mide lo que
tiene que medir y el padding se suma por fuera. */
box-sizing: content-box;
max-width: 52ch;
align-self: center;
/* Más aire que ninguna otra: es la sección protagonista de la portada, y
si todas respiran igual ninguna manda (ritmo-y-jerarquia.md, regla 4). */
padding-block: clamp(var(--space-20), 9vw, calc(var(--space-24) + var(--space-8)));
/* El sangrado replica el margen del contenedor, pero el contenedor ademas
mete su propio padding-inline de var(--space-6) (main.css): sin sumarlo,
el titular de la miel salia 24 px a la izquierda del de "Tratamientos"
que viene justo debajo. Se suma aqui y se mide en cqi, no en vw. */
padding-inline: max(var(--space-6), calc((100cqi - var(--container)) / 2 + var(--space-6))) clamp(var(--space-8), 5vw, var(--space-16));
}
.miel-etiqueta {
/* flex y no inline-block: lleva el filete grabado delante (ver los
rótulos, arriba del todo). */
display: flex; align-items: center; gap: var(--space-4);
font-size: var(--text-xs);
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 700;
color: var(--color-ink);
margin: 0 0 var(--space-6);
}
.miel-titulo {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 var(--space-5);
text-wrap: balance;
}
.miel-resumen {
font-size: var(--text-lg);
line-height: 1.65;
/* Tinta plena. Al 90% se dejaba pasar metal y, medido en el render (el
peor píxel detrás de la letra), bajaba a 4.16 en móvil y 4.41 en un
portátil de 1024: por debajo de AA justo en el párrafo que se lee.
Calcularlo con los hex de la paleta daba un aprobado engañoso. */
color: var(--color-ink);
margin: 0 0 var(--space-8);
}
.miel-franjas {
list-style: none; margin: 0 0 var(--space-8); padding: 0;
display: flex; flex-wrap: wrap; gap: var(--space-6);
}
.miel-franjas li {
display: flex; align-items: center; gap: var(--space-2);
font-size: var(--text-sm);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-primary);
font-variant-numeric: tabular-nums;
}
.miel-icono-reloj { width: 18px; height: 18px; color: var(--color-ink); }
.miel .enlace-subrayado { color: var(--color-ink); }
.miel .enlace-subrayado:hover { color: var(--color-primary-hover); }
.miel-precio { font-family: var(--font-display); font-size: var(--text-lg); text-transform: none; }
/* La foto se sale por el borde derecho de la ventana. Es el gesto editorial
de la sección: rompe la caja del contenedor sin necesidad de nada más. */
.miel-media {
position: relative; min-height: 100%;
/* La foto se apoya SOBRE la placa, no se pega a ella: una sombra teñida en
su borde izquierdo le da el grosor de una pieza puesta encima. */
box-shadow: -28px 0 56px -28px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
/* object-fit: cover y NO el 'fill' de antes, que estiraba la foto. Con la
columna a altura completa, la imagen llena la banda y desaparecen los
190 px de rosa muerto que quedaban arriba y abajo. */
.miel-foto {
width: 100%; height: 100%;
object-fit: cover; object-position: 60% 50%;
display: block;
}
.miel-media .foto-hueco { width: 100%; height: 100%; }
.foto-hueco--sobre-acento {
border-color: color-mix(in srgb, var(--color-cobre-tinta) 35%, transparent);
background: color-mix(in srgb, var(--color-cobre-tinta) 7%, var(--color-surface));
color: var(--color-cobre-tinta);
}
/* ── MOSAICO DE TRATAMIENTOS ─────────────────────────────────────────
El sustituto de la rejilla de tarjetas. Celdas planas separadas por un
hilo del color de la banda: se leen como un tejido, no como objetos
sueltos flotando.
------------------------------------------------------------------- */
.mosaico-intro {
padding-block: clamp(var(--space-16), 9vw, var(--space-24)) var(--space-12);
text-align: center;
}
.mosaico-intro .eyebrow {
letter-spacing: .24em;
color: var(--color-cobre-tinta);
margin-bottom: var(--space-4);
}
/* La entradilla de la carta. Medida corta y centrada bajo el titular: son
dos frases que enmarcan trece tratamientos, no un párrafo de cuerpo. */
.mosaico-entradilla {
max-width: 54ch;
margin: var(--space-6) auto 0;
font-size: var(--text-lg);
line-height: 1.7;
color: var(--color-muted);
text-wrap: pretty;
}
.mosaico-grupo { position: relative; isolation: isolate; padding-block: clamp(var(--space-12), 6vw, var(--space-16)); }
/* El mosaico fuera de la portada. Son tres sitios más desde que el catálogo
entero habla el mismo idioma (mosaico-grupo.php):
· /tratamientos/ el hub, con las cinco categorías
· /tratamientos/ del tratamiento. */
.mosaico--hermanos { margin-top: clamp(var(--space-16), 8vw, var(--space-20)); }
.mosaico--hermanos .mosaico-intro .eyebrow { color: var(--color-cobre-tinta); letter-spacing: .24em; }
/* La salida hacia el hub desde una categoría. Centrada y con aire, como el
resto de remates de esta web: pegada a la izquierda debajo de una banda a
sangre se leía como un enlace olvidado. */
.volver { margin: 0; text-align: center; }
/* Los grupos claros no se separan con un corte de color: EMPALMAN. El lino
es el mismo del suelo, así que la intro y el primer grupo son una sola
superficie (antes había entre los dos una costura de un 1-2% que solo se
leía como un error). La arena entra degradándose desde el lino en sus
primeros 160 px, así que la página se oscurece un paso sin que se vea
dónde. Los cortes netos quedan para las placas (cobre, espresso), que sí
tienen borde, como la placa de verdad. */
.mosaico-grupo--lino { background: var(--tile-lino); }
.mosaico-grupo--arena { background: linear-gradient(180deg, var(--tile-lino) 0, var(--tile-arena) 160px); }
.mosaico-grupo--cobre { background: linear-gradient(180deg, var(--tile-lino) 0, var(--tile-cobre) 160px); }
/* El ancla del mosaico. No es decoración: son más de 3.000 px de rejilla, y
sin un punto de peso a media altura el catálogo se lee como una sola masa
clara. Jerarquiza además el diferencial del negocio.
Es COBRE BRUÑIDO y no espresso: la sombra de las esquinas de la placa.
Todo lo que es miel en la portada es cobre (la banda de arriba, este
grupo), y el espresso queda para la persona y el cierre. Siendo espresso
se leía como una banda oscura casi vacía —dos celdas en 1.400 px— que
repetía a la de "Quién te atiende" dos secciones más abajo.
Lo que hace que se lea como METAL y no como marrón es el reflejo, no el
tono: una primera versión era un degradado de cobre oscuro plano con un
cepillado marcado, y a tamaño real se leía como madera. En la placa, las
esquinas en sombra son casi negras y lo que las hace cobre es la luz que
las cruza. Así que aquí: base honda (el bruñido mezclado con espresso) y
un reflejo diagonal de cobre al mismo ángulo que el resto del metal
(115deg). El reflejo se queda por debajo de lo que dejaría la crema en
4.5:1 — medido en el render, no con los hex. */
.mosaico-grupo--oscuro {
background:
linear-gradient(115deg,
transparent 18%,
color-mix(in srgb, var(--color-accent) 20%, transparent) 40%,
color-mix(in srgb, var(--color-cobre-claro) 14%, transparent) 50%,
color-mix(in srgb, var(--color-accent) 18%, transparent) 60%,
transparent 82%),
radial-gradient(70% 140% at 88% -20%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 62%),
linear-gradient(180deg,
color-mix(in srgb, var(--color-cobre-oscuro) 62%, var(--color-primary)) 0%,
color-mix(in srgb, var(--color-cobre-oscuro) 48%, var(--color-primary)) 100%);
color: var(--color-on-primary);
/* El borde de la placa, grabado: filete de cobre arriba y abajo. Va entre
dos secciones claras, así que se lee como una banda, no como un escalón
(ritmo-y-jerarquia.md, "Costuras"). */
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--color-cobre-claro) 45%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--color-cobre-claro) 45%, transparent);
}
/* El mismo cepillado que el hero y la banda de la miel: las tres superficies
de cobre son la misma pieza de metal en tres luces. */
.mosaico-grupo--oscuro::before {
content: "";
position: absolute; inset: 0; z-index: -1;
pointer-events: none;
/* Mucho más suave que en las placas claras: sobre un fondo oscuro, el
mismo cepillado se leía como vetas de madera. */
background: repeating-linear-gradient(0deg,
color-mix(in srgb, var(--color-cobre-claro) 5%, transparent) 0 1px, transparent 1px 3px,
color-mix(in srgb, #000 5%, transparent) 3px 4px, transparent 4px 6px);
mix-blend-mode: soft-light;
}
.mosaico-grupo--oscuro .mosaico-cabecera {
border-bottom-color: color-mix(in srgb, var(--color-on-primary) 28%, transparent);
}
.mosaico-grupo--oscuro .mosaico-icono { color: var(--color-cobre-claro); }
.mosaico-grupo--oscuro .mosaico-categoria a { color: var(--color-on-primary); }
.mosaico-grupo--oscuro .mosaico-categoria a:hover { color: var(--color-cobre-claro); }
.mosaico-grupo--oscuro .mosaico-intro-cat {
color: color-mix(in srgb, var(--color-on-primary) 76%, transparent);
}
.mosaico-grupo--oscuro .mosaico-celda {
/* Casi transparentes, con el hilo en cobre. Con el 7% de crema que
llevaban sobre el petroleo, sobre el espresso se leian como cajas
marrones planas: el unico sitio de la web donde la paleta caia en
"marron". Ahora la celda la dibuja la linea, no el relleno. */
background: transparent;
}
.mosaico-grupo--oscuro { --hilo: color-mix(in srgb, var(--color-accent) 48%, var(--color-cobre-oscuro)); }
.mosaico-grupo--oscuro .mosaico-enlace:hover {
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.mosaico-grupo--oscuro .mosaico-servicio { color: var(--color-on-primary); }
.mosaico-grupo--oscuro .mosaico-enlace:hover .mosaico-servicio { color: var(--color-cobre-claro); }
.mosaico-grupo--oscuro .mosaico-resumen {
color: color-mix(in srgb, var(--color-on-primary) 72%, transparent);
}
.mosaico-grupo--oscuro .mosaico-duracion { color: var(--color-cobre-claro); }
.mosaico-cabecera {
display: flex; align-items: flex-start; gap: var(--space-5);
margin-bottom: var(--space-8);
padding-bottom: var(--space-6);
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.mosaico-icono { flex: none; color: var(--color-cobre-tinta); }
/* 48 y no 40: son los iconos dibujados para esta web (la pieza que no se
puede copiar de un set) y a 40 px se leían como iconos de librería. */
.shunku-icono--categoria { width: 48px; height: 48px; }
.mosaico-categoria {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-2xl);
letter-spacing: .06em;
text-transform: uppercase;
margin: 0 0 var(--space-2);
}
.mosaico-categoria a { color: var(--color-primary); text-decoration: none; }
.mosaico-categoria a:hover { color: var(--color-cobre-tinta); }
.mosaico-intro-cat {
margin: 0; max-width: 62ch;
font-size: var(--text-sm); line-height: 1.6;
color: color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.mosaico-celdas {
list-style: none; margin: 0; padding: 0;
display: grid;
/* auto-FIT, no auto-fill: con dos tratamientos, auto-fill dejaba dos
columnas fantasma y auto-fit las colapsa estirando las celdas.
El contenedor NO pinta fondo ni borde. Los pintaba, y como la rejilla
casi nunca cuadra —cinco celdas en cuatro columnas dejan tres huecos—,
ese fondo salía como un bloque gris de hasta el 50% del ancho. Se leía
como una maqueta rota, que es lo más caro que puede pasarle a una web.
Ahora el hilo entre celdas es el propio color de la banda, que se ve por
el gap, y donde no hay celda simplemente no hay nada. */
/* Una columna de partida (movil). Las de escritorio se fijan abajo con
numero EXPLICITO: auto-fit no convive con una celda que ocupa dos
columnas — con las dos cosas a la vez el navegador resolvia la rejilla
a dos columnas gigantes de 527 y 603 px en vez de cuatro. */
grid-template-columns: 1fr;
gap: 1px;
background: none;
border: 0;
}
.mosaico-celda {
/* Sin relleno: la celda la dibuja el hilo, no una caja. Con el blanco roto
que llevaban, el catálogo se leía como una rejilla de tarjetas —
justo lo que la regla 1 de este archivo ("nada de tarjetas") prohíbe, y
lo primero que delataba la plantilla. Ahora se lee como la carta de un
centro: un tejido de líneas finas sobre la superficie de la banda.
El hilo es un outline SIN desplazamiento, así que cae en el gap de 1 px:
el de las dos celdas vecinas se pinta en el mismo píxel y la línea sale
nítida, sin doblarse. Y es de color sólido (no transparente) por lo
mismo: dos transparentes superpuestos oscurecerían el cruce. Donde no
hay celda no se pinta nada. */
background: transparent;
outline: 1px solid var(--hilo, color-mix(in srgb, var(--color-cobre-tinta) 20%, var(--tile-lino)));
outline-offset: 0;
}
.mosaico-grupo--arena { --hilo: color-mix(in srgb, var(--color-cobre-tinta) 22%, var(--tile-arena)); }
.mosaico-enlace {
/* Columna flexible: la duracion baja al pie de la celda con margin-top
auto. Las filas las mide la celda de foto, asi que el texto se quedaba
arriba y cada celda tenia un tercio de aire muerto debajo. */
display: flex; flex-direction: column; height: 100%;
/* Más generoso de lo que pedía la retícula. Trece tratamientos con poco
aire se leen como una hoja de cálculo; con aire, como un catálogo. */
padding: var(--space-8) var(--space-6) var(--space-10);
text-decoration: none;
transition: background var(--duration-base) var(--ease-out);
}
.mosaico-enlace:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.mosaico-servicio {
font-family: var(--font-display);
font-weight: 400;
/* El nombre del tratamiento es lo que se busca al escanear la carta: sube
de tamaño y separa más del resumen. Subir el contraste tipográfico es lo
que más levanta una página, más que añadir efectos. */
font-size: clamp(1.15rem, 1rem + .4vw, 1.45rem);
line-height: 1.2;
color: var(--color-primary);
margin: 0 0 var(--space-3);
}
.mosaico-enlace:hover .mosaico-servicio { color: var(--color-cobre-tinta); }
.mosaico-resumen {
font-size: var(--text-sm); line-height: 1.6;
color: color-mix(in srgb, var(--color-primary) 68%, transparent);
margin: 0 0 var(--space-4);
}
/* Celdas sin resumen: la duracion NO se ancla al pie.
Al entrar la carta definitiva hay seis tratamientos publicados sin resumen
—estan a la espera de que la clienta escriba su descripcion—, y en esas
celdas el anclaje dejaba el titulo arriba, la duracion abajo y un agujero
de 200 px en medio. Pegada al titulo, la celda se lee como corta, que es
lo que es, y el aire queda al final en vez de partirla por la mitad.
Comparado renderizado el 2026-09-17, no decidido a ojo.
Las celdas que SI tienen resumen no se tocan: ahi el anclaje es correcto y
es lo que alinea las duraciones de toda la fila. */
.mosaico-enlace:not(:has(.mosaico-resumen)) .mosaico-duracion { margin-top: 0; }
.mosaico-duracion {
margin: auto 0 0;
font-size: var(--text-xs);
/* .14em partia "45 MIN · 60 MIN · 90 MIN · 120 MIN" en 3 + 1, y la linea
huerfana con la ultima franja sola se leia como un error de maqueta en
los seis tratamientos que tienen las cuatro duraciones. */
letter-spacing: .1em;
text-transform: uppercase;
color: var(--color-cobre-tinta);
font-variant-numeric: tabular-nums;
/* Y si aun asi no cabe, que parta por la mitad (2 + 2) en vez de dejar una
sola franja abajo. */
text-wrap: balance;
}
/* La celda de foto llena su hueco entero, sin margen: es una pieza más del
tejido, no una imagen dentro de una caja. */
.mosaico-celda--foto {
padding: 0; min-height: 260px; display: flex; overflow: hidden;
outline: 0;
/* Marco de la foto, que ahora va posicionada. Ver .mosaico-foto. */
position: relative;
}
/* Dos columnas en escritorio. Con cuatro tratamientos + foto, una rejilla de
cuatro columnas cuadra exacta en dos filas (2 celdas + foto de 2 = 4, y
luego 2 celdas + la foto que sigue). Es la diferencia entre una rejilla que
respira y una con huecos. */
@media (min-width: 700px) {
/* Categorias cortas (sin celda de foto): dos columnas, y las celdas se
reparten el ancho en vez de dejar columnas fantasma. */
.mosaico-celdas { grid-template-columns: repeat(2, 1fr); }
/* Una categoria con UN solo tratamiento ("Spa & bienestar") dejaba media
fila vacia: una caja a la izquierda y un agujero del mismo tamano a la
derecha, que es lo que hace que una rejilla parezca sin terminar. Sola en
la fila, la celda ocupa el ancho entero y se lee como una banda: una
decision, no un hueco. Es la misma correccion que ya lleva el tercer
tratamiento detras de la foto, aplicada al caso de uno solo. */
.mosaico-celdas > .mosaico-celda:only-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
/* Con foto: cuatro columnas y la foto ocupando un cuadrado de 2x2. Con
cuatro tratamientos el bloque cuadra exacto —dos celdas + foto llenan la
primera fila, las otras dos llenan la segunda bajo la foto— que es justo
lo que antes dejaba el 38% de la rejilla vacia. */
.mosaico-celdas--con-foto { grid-template-columns: repeat(4, 1fr); }
.mosaico-celda--foto { grid-column: span 2; grid-row: span 2; }
/* Con tres tratamientos, el tercero se quedaba solo en la segunda fila
junto a un hueco vacío del tamaño de una celda ("Spa y bienestar"): se
leía como una maqueta sin terminar. Si tras la foto queda un único
tratamiento, ocupa las dos columnas libres. */
.mosaico-celdas--con-foto > .mosaico-celda--foto + .mosaico-celda:last-child { grid-column: span 2; }
/* Y el mismo caso una fila mas abajo. Con CINCO tratamientos ("Masajes")
las dos primeras celdas y la foto llenan la fila 1, otras dos llenan la
fila 2 bajo la foto, y el quinto se quedaba solo en la fila 3 con TRES
columnas vacias al lado: el agujero mas grande del catalogo, y encima en
la categoria que mas gente mira.
La cuenta: la foto es el tercer hijo, asi que a partir de ahi las celdas
caen de dos en dos y la que abre fila es siempre la de indice par. Si esa
es ademas la ultima, esta sola. De la sexta en adelante la fila esta
entera libre (la foto solo ocupa las dos primeras), asi que puede tomarla
completa; el caso de la cuarta lo resuelve la regla de arriba con span 2,
porque ahi la foto todavia ocupa las columnas 3 y 4. */
.mosaico-celdas--con-foto > .mosaico-celda--foto ~ .mosaico-celda:last-child:nth-child(n+6):nth-child(even) {
grid-column: 1 / -1;
}
}
/* ── Categorías cortas: el texto a un lado y la foto al otro ──────────
La maqueta de una categoría de uno o dos tratamientos. No es un apaño
para rellenar: es la forma que le corresponde.
Dos tratamientos en una rejilla pensada para cuatro columnas se leen
como una rejilla a medio llenar —dos cajas y aire—, y eso pasaba justo
en las dos bandas con menos contenido de la portada, que son las que
menos lo aguantan. Los mismos dos contra una foto de la misma altura
se leen como una pieza entera, y además rima con los grupos grandes,
donde el texto también entrega a una foto por la derecha.
La foto va SIEMPRE a la derecha aquí (grid-column 2 y todas las filas),
aunque en el marcado venga detrás del último tratamiento: en el DOM el
orden es el de lectura —los tratamientos primero, que son el contenido—
y la rejilla la coloca donde toca. */
@media (min-width: 700px) {
.mosaico-celdas--pareja {
grid-template-columns: 1fr 1fr;
/* Las filas van DECLARADAS, una por tratamiento (--filas lo pone el PHP).
No es un capricho: `grid-row: 1 / -1` de la foto cuenta líneas
explícitas, y sin declararlas -1 es la línea 1 — la foto ocupaba una
sola fila y el segundo tratamiento se quedaba con el hueco al lado. */
grid-template-rows: repeat(var(--filas, 1), minmax(0, 1fr));
}
.mosaico-celdas--pareja > .mosaico-celda--foto {
grid-column: 2;
grid-row: 1 / -1;
}
}
/* Suelo de altura para que la banda tenga presencia: con un solo
tratamiento corto, la foto y la celda medían 120 px y la banda entera
se leía como una nota al pie del catálogo. */
.mosaico-celdas--pareja > .mosaico-celda--foto { min-height: clamp(220px, 24vw, 320px); }
/* ── La categoría de un solo tratamiento y sin foto ───────────────────
"Spa & bienestar": una celda a ancho completo con el texto en la
esquina de arriba a la izquierda y mil píxeles de nada al lado. A
media fila dejaba un agujero del tamaño de una celda, y a fila entera
un rectángulo vacío — las dos formas se leen como una maqueta sin
terminar, que es lo más caro que puede pasarle a una web.
La salida no es rellenar: es reconocer qué es. Es el ÚLTIMO grupo del
catálogo y tiene un solo tratamiento, o sea un remate, no una rejilla.
Centrado y con aire, la anchura pasa de sobrar a ser el gesto —el
mismo recurso que ya usa "Un espacio para ti" en Contacto.
Sigue siendo una celda del tejido: mismo hilo, mismo fondo, misma
familia (regla 5 de ritmo-y-jerarquia). Solo cambia cómo se reparte
el contenido dentro.
En cuanto la categoría tenga foto, entra la maqueta 'pareja' y esto
deja de aplicarse solo. */
.mosaico-celdas:not(.mosaico-celdas--pareja) > .mosaico-celda:only-child .mosaico-enlace {
align-items: center;
text-align: center;
padding-block: clamp(var(--space-12), 6vw, var(--space-16));
}
.mosaico-celdas:not(.mosaico-celdas--pareja) > .mosaico-celda:only-child .mosaico-servicio {
font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem);
margin-bottom: var(--space-4);
}
.mosaico-celdas:not(.mosaico-celdas--pareja) > .mosaico-celda:only-child .mosaico-resumen {
max-width: 46ch;
font-size: var(--text-base);
margin-bottom: 0;
}
/* La duración, si la hay, se despega del cuerpo en vez de anclarse al pie:
en una celda centrada el anclaje la mandaba al fondo del rectángulo. */
.mosaico-celdas:not(.mosaico-celdas--pareja) > .mosaico-celda:only-child .mosaico-duracion {
margin-top: var(--space-6);
}
/* object-fit y no aspect-ratio: la celda ya tiene la altura que le da la fila
de la rejilla, y la foto se recorta para llenarla. Así una imagen cuadrada
y una vertical caben igual de bien y el tejido no se descuadra según lo que
suba la clienta.
POSICIONADA, y esto es lo que arreglaba los huecos de todo el mosaico.
En flujo normal, `height: 100%` dentro de una fila de altura indefinida se
resuelve a `auto`: la foto se pintaba a su proporción natural sobre ~570 px
de ancho, o sea 400-570 px de alto, y como ocupa DOS filas, esas dos filas
pasaban a medir ~285 px cada una. Las celdas de texto de al lado, que con
título y duración miden 110, se estiraban hasta ahí — de ahí los 170 px de
vacío debajo de cada tratamiento. Era peor cuanto menos texto tenía la
categoría, así que le tocaba justo a las que peor aguantan un hueco:
"Rituales exclusivos" y "Rituales de cabeza y pies", donde todavía no hay
resúmenes escritos.
Sacada del flujo con position:absolute, la foto deja de opinar sobre la
altura de las filas: las miden los tratamientos, que es quien debe, y la
foto rellena lo que salga. El min-height de la celda sigue de suelo para
que no quede convertida en una tira cuando la categoría es muy corta. */
.mosaico-foto {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
}
.foto-hueco--celda {
width: 100%; aspect-ratio: auto; border: 0; border-radius: 0;
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
/* ── Retoques a las variantes reutilizadas ───────────────────────────
Sobre nosotros, FAQ, cierre y footer sí son de la base. Sin estos
retoques se notaría el salto entre lo hecho a medida y lo heredado.
------------------------------------------------------------------- */
/* Esta banda se oscurece aqui, pero no lleva la clase .section--dark, que es
quien redefine los tokens de contraste en la base. Sin esa redefinicion los
parrafos seguian pintandose con el --color-muted de fondo claro (#5F7079,
pizarra oscura) sobre la banda oscura: casi ilegibles. Se repiten aqui los
mismos tokens que usa .section--dark. */
.sobre-nosotros--con-imagen {
background:
radial-gradient(65% 90% at 0% 100%, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 62%),
var(--color-primary);
color: var(--color-on-primary);
/* Mismo gesto que el ancla del mosaico (filete de cobre en los dos bordes,
veladura por una esquina), con la veladura en la esquina contraria para
que las dos no se lean como copias. */
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--color-accent) 55%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--color-accent) 55%, transparent);
--color-muted: color-mix(in srgb, var(--color-on-primary) 78%, transparent);
--color-border: color-mix(in srgb, var(--color-on-primary) 25%, transparent);
}
.sobre-nosotros--con-imagen .section-title {
font-family: var(--font-display); font-weight: 400;
text-transform: uppercase; letter-spacing: .05em;
}
.sobre-nosotros--con-imagen .eyebrow { color: var(--color-cobre-claro); letter-spacing: .24em; }
/* "Cómo trabajo" — solo en /sobre-nosotros/, dentro de la columna de texto.
Va separado por un filete y no por una caja: en esta identidad la jerarquía
la hacen el aire y las líneas, nunca un contenedor. El punto de la lista lo
pone .lista-marcada, la misma que usan las fichas de tratamiento, para que
la página y las fichas se lean como el mismo sitio. */
.sobre-nosotros-modo {
margin-top: var(--space-10);
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
}
.sobre-nosotros-modo-titulo {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-xs);
letter-spacing: .24em;
text-transform: uppercase;
color: var(--color-cobre-claro);
margin: 0 0 var(--space-5);
}
/* El punto de la lista es cobre, y sobre el espresso se apaga: aquí sube al
cobre lavado, que es el acento que esta banda ya usa en el rótulo. */
.sobre-nosotros--shunku .lista-marcada li::before { background: var(--color-cobre-claro); }
/* El hueco de foto sobre la banda oscura.
Con los colores de fondo claro, la caja del hueco salia casi blanca sobre
la banda oscura: era el elemento MAS brillante de esa zona de la pagina, y lo
que mas se miraba era justo el sitio donde todavia no hay nada. */
.sobre-nosotros--con-imagen .foto-hueco {
background: color-mix(in srgb, var(--color-on-primary) 6%, transparent);
border-color: color-mix(in srgb, var(--color-on-primary) 26%, transparent);
color: color-mix(in srgb, var(--color-on-primary) 68%, transparent);
}
/* FAQ: fuera las cajas. Solo filetes finos, a ancho completo — el briefing
pide expresamente el acordeón sin columnas (apartado 9). */
.faq--acordeon .faq-list { max-width: 900px; margin-inline: auto; gap: 0; }
.faq--acordeon .faq-item {
/* Filete de cobre en vez de gris: el acordeón era lo único de la página
que seguía separando con líneas neutras. */
background: transparent; border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--color-cobre-tinta) 22%, transparent);
border-radius: 0; padding: 0;
transition: background var(--duration-base) var(--ease-out);
}
.faq--acordeon .faq-item:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.faq--acordeon .faq-item:first-child {
border-top: 1px solid color-mix(in srgb, var(--color-cobre-tinta) 22%, transparent);
}
/* El marcador del navegador se quita AQUI y no en main.css.
Estaba en main.css y se perdio al sincronizar el tema con la base nueva:
el acordeon volvio a salir con el triangulito gris por defecto, que es la
senal mas clara de "esto no lo ha tocado nadie" que puede tener una web.
Hacen falta las tres declaraciones —list-style, ::marker y el
pseudo-elemento de WebKit— porque ningun navegador respeta las tres. */
.faq--acordeon .faq-item summary {
font-family: var(--font-display); font-weight: 400;
font-size: var(--text-xl); line-height: 1.35;
padding: var(--space-8) var(--space-4);
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--space-6);
cursor: pointer;
list-style: none;
}
.faq--acordeon .faq-item summary::marker { content: ""; }
.faq--acordeon .faq-item summary::-webkit-details-marker { display: none; }
.faq--acordeon .faq-item summary::after {
content: "+";
flex: none;
/* Más fino y más grande: a peso normal, el signo pesaba más que la
pregunta. */
font-family: var(--font-body); font-weight: 200;
font-size: 1.75rem; line-height: 1;
color: var(--color-accent);
transition: transform var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.faq--acordeon .faq-item[open] summary::after { transform: rotate(180deg); color: var(--color-cobre-tinta); }
.faq--acordeon .faq-item[open] summary::after { content: "−"; }
.faq--acordeon .faq-item summary:focus-visible {
outline: 2px solid var(--color-accent); outline-offset: -4px;
}
.faq--acordeon .faq-item[open] summary { color: var(--color-cobre-tinta); }
.faq--acordeon .faq-item > div { padding: 0 var(--space-2) var(--space-6); max-width: 72ch; }
/* La respuesta se pinta sin wp_kses_post() a proposito, para que se puedan
incrustar videos (ver faq-acordeon.php). El reset de main.css encaja img,
video y svg dentro de su caja, pero deja fuera