/* ============================================================
07 · PÁGINAS — SOLO excepciones scopeadas
------------------------------------------------------------
Regla: aquí no se crean componentes. Si algo se repite en más
de una página, sube a 04-components.css.
Scope obligatorio con la clase de página:
.yk-page-anime .yk-hero { ... }
------------------------------------------------------------
Vacío a propósito: se irá poblando al construir la home y las
landings de estilo (anime, fine line, realista, blackwork).
============================================================ */
/* ============================================================
HOME · front-page.php
Solo lo que la portada no puede resolver con la capa de
componentes.
v4.1 — hero, mech, artistas, reseñas, "primera vez", proceso y
presupuesto se han PROMOVIDO a 04-components.css: los usa
tambien la landing de anime y los usaran las otras tres. Aqui
se queda solo lo que de verdad es exclusivo de la portada.
============================================================ */
/* —— Estilos —— */
.yk-home .yk-styles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.yk-home .yk-style{border:1px solid var(--yk-line-2);background:rgba(10,10,12,.72);display:flex;flex-direction:column}
.yk-home .yk-style img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.yk-home .yk-style__body{padding:20px;display:flex;flex-direction:column;flex:1}
.yk-home .yk-style__body h3{font-size:19px;margin-bottom:10px}
.yk-home .yk-style__body p{font-size:16px;color:var(--yk-mute);margin-bottom:14px}
.yk-home .yk-style__body a{
margin-top:auto; /* ancla el enlace al mismo borde inferior en las 4 tarjetas,
sin importar si el texto ocupa 1 línea o 2 */
font-family:var(--yk-f-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--yk-neon);
}
@media(max-width:900px){.yk-home .yk-styles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
/* Nunca 1 sola columna: una tarjeta a ancho completo con imagen 3:4
ocupa casi toda la pantalla. Con 2 columnas cada imagen pesa la
mitad y el bloque entero se lee sin scroll interminable. */
.yk-home .yk-styles{grid-template-columns:repeat(2,1fr);gap:10px}
.yk-home .yk-style__body{padding:14px}
.yk-home .yk-style__body h3{font-size:16px}
.yk-home .yk-style__body p{font-size:15px;margin-bottom:10px}
}
/* —— Galería —— */
/* 8 piezas: 4 columnas dan 2 filas exactas. Con 5 columnas quedaban
5+3 y dos huecos vacíos a la derecha. Si algún día cambia el número
de fotos, ajusta las columnas a un divisor de ese número. */
.yk-home .yk-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.yk-home .yk-gallery__item{width:100%;display:block;overflow:hidden}
.yk-home .yk-gallery__item img{
width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
transition:transform var(--yk-t) var(--yk-ease);
}
.yk-home .yk-gallery__item:hover img{transform:scale(1.03)}
@media(max-width:900px){.yk-home .yk-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.yk-home .yk-gallery{grid-template-columns:repeat(2,1fr)}}
/* —— Dónde estamos —— */
.yk-home .yk-where{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.yk-home .yk-where__nap{
font-style:normal;display:grid;gap:6px;margin:20px 0 24px;
font-family:var(--yk-f-mono);font-size:14px;color:var(--yk-mute);
}
.yk-home .yk-where__nap a{color:var(--yk-mute)}
.yk-home .yk-where__nap a:hover{color:var(--yk-neon)}
.yk-home .yk-where__media{width:100%;display:block}
.yk-home .yk-where__media img{width:100%;height:auto;aspect-ratio:9/7;object-fit:cover}
@media(max-width:820px){
/* Mismo riesgo que el hero y que "cómo diseñamos": imagen de 900px
de HTML sin protección de columna. */
.yk-home .yk-where{grid-template-columns:minmax(0,1fr)}
}
/* —— Imágenes aún sin rellenar: marco visible en lugar de icono roto —— */
/* Un con src="" es una imagen rota: el navegador la colapsa y no
respeta el aspect-ratio. Mientras no haya foto real, se fuerza a
ocupar su hueco completo para poder juzgar la maquetación. Al pegar
la URL, esta regla deja de aplicar sola. */
.yk-home img[src=""]{
display:block;
width:100%;
background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px);
border:1px dashed rgba(255,255,255,.22);
}
.yk-home .yk-hero__img[src=""]{aspect-ratio:4/5;height:auto}
.yk-home .yk-style img[src=""]{aspect-ratio:3/4;height:auto}
.yk-home .yk-gallery__item img[src=""]{aspect-ratio:4/5;height:auto}
.yk-home .yk-artist img[src=""]{aspect-ratio:1;height:auto}
.yk-home .yk-mech__media img[src=""],
.yk-home .yk-where__media img[src=""]{aspect-ratio:9/7;height:auto}
@media(max-width:820px){.yk-home .yk-hero__img[src=""]{aspect-ratio:4/3}}
/* —— Artistas · rejilla de TRES (exclusivo de la portada) ——
La landing de anime solo muestra dos fichas, así que este truco
—el tercer artista ocupa las dos columnas para no dejar un hueco
huérfano— no puede vivir en la capa de componentes.
CORREGIDO v4.2: en el refactor anterior, las dos reglas de este
truco (la de 820px y la de 560px del original) quedaron fusionadas
dentro de un solo @media(max-width:820px). Como la segunda
declaración (grid-column:auto) venía después en el mismo bloque,
ganaba siempre por orden de cascada — así que entre 560 y 820px de
ancho el tercer artista NUNCA llegaba a ocupar las dos columnas.
Se restauran los dos rangos por separado, como en el original. */
@media(max-width:820px) and (min-width:561px){
.yk-home .yk-artist:last-child{grid-column:1 / -1}
.yk-home .yk-artist:last-child img{aspect-ratio:16/9}
}
@media(max-width:560px){
.yk-home .yk-artist:last-child{grid-column:auto}
.yk-home .yk-artist:last-child img{aspect-ratio:1}
}
/* ============================================================
LANDING ANIME · page-tatuaje-anime-malaga.php
Excepciones de la landing. Todo lo demás lo resuelve la capa
de componentes.
============================================================ */
/* —— Ritmo vertical propio ——
El token global --yk-pad-y (hasta 140px por sección) está calibrado
para una portada de 11 bloques cortos. Esta landing tiene diez
secciones más densas: con el mismo espaciado se convierte en un
desierto de scroll, que es justo lo que se reportó.
Se redefine la CUSTOM PROPERTY, no el valor fijo, y solo dentro de
.yk-page-anime: si .yk-section usa var(--yk-pad-y) para su padding
vertical (que es para lo que existe el token), esta única línea
basta y la home no se entera. Si en 03-layout.css .yk-section lleva
el padding escrito a fuego en vez de con var(), esta regla no hará
nada — avisar si al subir sigue viéndose igual de espacioso. */
.yk-page-anime {
--yk-pad-y: clamp(40px, 5vw, 88px);
}
/* Los tres casos del bloque de proyectos son .yk-mech consecutivos.
Sin separación se leen como un solo bloque continuo. */
.yk-page-anime .yk-mech + .yk-mech{margin-top:clamp(40px,6vw,88px)}
/* Dos artistas firman anime, no tres: la rejilla de componentes
viene a 3 columnas y aquí sobraría una. */
.yk-page-anime .yk-artists{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.yk-page-anime .yk-artists{grid-template-columns:1fr}}
/* —— Hero: escala del titular ——
La maqueta del hero (dos filas, H1 arriba y texto+imagen debajo) la
resuelve la variante .yk-hero--editorial en 04-components.css. Aquí
solo queda la escala tipográfica, que sí es decisión de esta página:
el token global --yk-type-h1 llega a 120px y fue justo lo que se vio
sobredimensionado en la primera versión publicada. */
.yk-page-anime .yk-hero h1{
font-size:clamp(34px,4.4vw,64px);
line-height:1.06;
}
/* Marco visible mientras falten fotos, igual que en la portada.
OJO: solo se activa con src="" (vacío). Las fotos de esta plantilla
llevan nombres de archivo de ejemplo, no src="", así que el navegador
ve una URL rota y esta regla no entra en juego — verás icono de
imagen rota hasta que sustituyas cada [franquicia]/[personaje] por el
archivo real. En cuanto el nombre exista en la mediateca, carga. */
.yk-page-anime img[src=""]{
display:block;
width:100%;
background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px);
border:1px dashed rgba(255,255,255,.22);
}
.yk-page-anime .yk-mech__media img[src=""]{aspect-ratio:9/7;height:auto}
.yk-page-anime .yk-artist img[src=""]{aspect-ratio:1;height:auto}
/* ============================================================
LANDING FINE LINE · page-tatuaje-fine-line-malaga.php
Excepciones de la landing. El diagnóstico visual (.yk-diagnostic,
elemento de firma de esta página) y el pie de foto del showcase
viven en 04-components.css porque los van a reutilizar realismo y
blackwork, cada uno con sus propios criterios de "aguanta / no".
============================================================ */
/* Mismo motivo que en la landing de anime: diez secciones densas con el
ritmo de la portada (hasta 140px) se convierten en scroll vacío. */
.yk-page-fineline {
--yk-pad-y: clamp(40px, 5vw, 88px);
}
/* Hero: escala propia del titular, igual que en anime. El token global
--yk-type-h1 llega a 120px y aquí el H1 tiene siete palabras. */
.yk-page-fineline .yk-hero h1 {
font-size: clamp(32px, 4.2vw, 60px);
line-height: 1.06;
}
/* El aside del showcase lleva CUATRO h3 seguidos con su párrafo, no uno.
Sin este ritmo los cuatro bloques se leen como un muro continuo.
CORREGIDO: la versión anterior anulaba el margen inferior del párrafo
(margin-bottom:0) y dejaba que todo el espacio lo pusiera el margen
superior del h3 siguiente. El resultado se leía "muy junto" porque
solo quedaba un salto de separación, no dos — el párrafo se pegaba
al texto de arriba Y al título de abajo casi por igual. Ahora cada
párrafo mantiene su propio margen inferior y el h3 suma el suyo
encima: dos saltos de aire en vez de uno. */
.yk-page-fineline .yk-showcase__aside h3 {
margin-top: var(--yk-s6);
font-size: 19px;
}
.yk-page-fineline .yk-showcase__aside p { margin-bottom: var(--yk-s4); }
/* Dos .yk-mech consecutivos (técnica y boceto) necesitan separación
entre sí; el segundo va invertido y sin esto se leen como uno solo. */
.yk-page-fineline .yk-mech + .yk-mech { margin-top: clamp(40px, 6vw, 88px); }
/* La reseña embebida en el bloque "si vienes de fuera" cuelga dentro de
.yk-first > div, que ya está contemplado en la regla de componentes.
Aquí solo se le da aire respecto al párrafo anterior en móvil. */
@media (max-width: 820px) {
.yk-page-fineline .yk-first > div > .yk-review { margin-top: var(--yk-s4); }
}
/* Marco visible mientras falten fotos. Misma advertencia que en anime:
solo actúa con src="" vacío, no con una URL que aún no existe. */
.yk-page-fineline img[src=""] {
display: block;
width: 100%;
background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
border: 1px dashed rgba(255,255,255,.22);
}
.yk-page-fineline .yk-mech__media img[src=""] { aspect-ratio: 9/7; height: auto; }
.yk-page-fineline .yk-showcase__item img[src=""] { aspect-ratio: 4/5; height: auto; }
.yk-page-fineline .yk-hero__shot img[src=""] { aspect-ratio: 4/5; height: auto; }
/* Los dos párrafos sueltos del bloque 2 (entrada y cierre) NO viven
dentro de .yk-diagnostic ni de ninguna columna — son hijos directos
de .yk-container, a ancho completo de la sección. .yk-measure los
limita a una medida de lectura (~66ch), que en escritorio los deja
pegados a la izquierda con toda la derecha vacía, mientras que las
tarjetas de abajo sí usan el ancho completo. Se anula la medida SOLO
aquí — el resto de usos de .yk-measure en la página (aside del
showcase, bloque "si estás de paso"...) sigue con su medida normal,
porque ahí sí va en una columna estrecha real. */
.yk-page-fineline #donde-aguanta > .yk-container > .yk-measure {
max-width: none;
}
/* ============================================================
LANDING REALISMO · page-tatuaje-realista-malaga.php
Excepciones de la landing. El diagnóstico visual (.yk-diagnostic),
el showcase (.yk-showcase) y el proceso (.yk-steps) son los mismos
componentes de 04-components.css — aquí solo lo que es propio de
ESTA página: ritmo vertical, escala del H1, número de columnas y
los marcos de imagen mientras faltan fotos.
============================================================ */
/* Mismo motivo que en anime y fine line: diez secciones densas con
el ritmo de la portada (hasta 140px) se convierten en scroll vacío. */
.yk-page-realista {
--yk-pad-y: clamp(40px, 5vw, 88px);
}
/* Hero: escala propia del titular. El H1 de esta página tiene diez
palabras — más largo que el de anime o fine line — así que el
clamp baja un poco más para no partirse en demasiadas líneas. */
.yk-page-realista .yk-hero h1 {
font-size: clamp(30px, 4vw, 56px);
line-height: 1.1;
}
/* Diagnóstico: 3 criterios propios de esta landing, no 4 como en
fine line. A 2 columnas (el valor por defecto de .yk-diagnostic)
la tercera tarjeta queda sola y descentrada; a 3 columnas encajan
las tres en una sola fila a partir de donde cabe. */
@media (min-width: 900px) {
.yk-page-realista .yk-diagnostic {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Showcase: 4 fotos, no 6+. Misma decisión que en fine line — con 3
columnas por defecto cada foto queda demasiado pequeña para juzgar
un realismo, que es justo lo que el visitante ha venido a hacer. */
.yk-page-realista .yk-showcase__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 560px) {
.yk-page-realista .yk-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yk-s2); }
}
/* —— Hero: la imagen tiene que medir lo mismo que la columna de texto ——
.yk-hero--editorial ya resuelve esto en componentes: la imagen lleva
height:100% + object-fit:cover para llenar exactamente el alto de la
fila, que lo fija la columna de texto. El problema aparece SOLO con
el marco de imagen pendiente: la regla img[src=""] le devuelve
height:auto y un aspect-ratio 4/5, así que el marco se calcula por su
cuenta (columna de ~530px → 660px de alto) y desborda muy por debajo
del bloque de texto. Es lo que se veía descompensado.
Aquí se le devuelve el height:100% también al marco vacío, con un
mínimo por si algún día el texto de la izquierda fuese muy corto. En
cuanto haya foto real, esta regla deja de hacer falta y no molesta. */
.yk-page-realista .yk-hero__shot { align-self: stretch; }
.yk-page-realista .yk-hero__shot img[src=""] {
height: 100%;
min-height: 420px;
aspect-ratio: auto;
}
/* —— Medida de lectura pegada a la izquierda ——
.yk-measure limita el ancho de lectura, pero si además centra el
bloque, un párrafo corto queda flotando en medio de la sección
mientras el resto de la página alinea a la izquierda. Se ancla al
margen izquierdo solo en esta página. */
.yk-page-realista .yk-measure {
margin-inline-start: 0;
margin-inline-end: 0;
}
/* —— Separación entre el diagnóstico y su banda de CTA ——
.yk-diagnostic termina en la última tarjeta y .yk-ctaband empieza
inmediatamente después: sin aire, las dos cajas se leen como una
sola pieza rota por la mitad. */
.yk-page-realista .yk-diagnostic + .yk-ctaband {
margin-top: var(--yk-s7);
}
/* —— Marcador del bloque "Cuándo hay hueco" ——
Misma familia visual que la insignia "€" de .yk-price, para que los
dos bloques de la sección se lean como pareja y no como dos cosas
sueltas. Aquí en cuadrado con esquina redondeada, para que se
distinga del círculo del precio. */
.yk-page-realista .yk-note__head h3 {
display: flex;
align-items: center;
gap: 12px;
}
.yk-page-realista .yk-note__mark {
flex: none;
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: var(--yk-neon-soft);
color: var(--yk-neon);
font-size: 15px;
line-height: 1;
}
/* —— Bloques de nota: rediseño v5.0 ——
Tres problemas resueltos a la vez:
1) FONDO. Antes se dejó transparente y la caja pasaba a mostrar el
degradado ambiental de la página, que en esa zona vira a un tono
cálido. Fondo sólido --yk-card, el mismo que ya usan .yk-diag y
.yk-price, así que las tres cajas de la página comparten
superficie.
2) TEXTO. .yk-note__body venía con --yk-mute (.55). Ese token está
pensado para metadatos, no para dos párrafos de lectura seguida:
sobre --yk-card mide 6.26:1, pasa AA, pero al lado de un titular
en blanco puro se ve apagado. Se sube a rgba(255,255,255,.82),
que es exactamente lo que ya usa .yk-mech p para la prosa de las
landings — no es un valor nuevo, es el que el sistema ya tiene
para este mismo caso. Y a --yk-type-body (17px) en vez de heredar
un tamaño menor.
3) TITULAR. El componente define la escala para su h3
(clamp 22–32px), pero aquí el titular es un h2 y se llevaba el
token global --yk-type-h2, que llega a 48px. Para un bloque que
es una idea de apoyo, no la cabecera de una sección, resultaba
desproporcionado. Se le da la escala del propio componente.
El filete rosa a la izquierda pasa a los DOS bloques: es el lenguaje
que el sitio ya usa para "esto importa" en .yk-price, .yk-signature
y las citas de .yk-prose. Repetirlo aquí es coherencia, no adorno. */
.yk-page-realista .yk-note {
background: var(--yk-card);
border-color: var(--yk-line-2);
border-left: 3px solid var(--yk-neon);
/* La prosa de la derecha iba pegada arriba mientras el titular de la
izquierda ocupaba dos líneas: con dos columnas de alturas muy
distintas, el reparto se ve descolgado. Centrado, comparten eje. */
align-items: center;
}
.yk-page-realista .yk-note__head h2,
.yk-page-realista .yk-note__head h3 {
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.15;
max-width: 20ch;
}
.yk-page-realista .yk-note__body p {
color: rgba(255, 255, 255, .82);
font-size: var(--yk-type-body);
max-width: 60ch;
}
/* El titular de la tesis es largo (once palabras) y .yk-note lo mete en
una columna de .7fr, donde se parte en demasiadas líneas. Se reparte
más a favor del titular. */
@media (min-width: 861px) {
.yk-page-realista #tesis .yk-note {
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
}
.yk-page-realista .yk-note__head h3,
.yk-page-realista .yk-note__head h2 {
max-width: 20ch;
}
/* —— Lista de terrenos del aside ——
.yk-serieslist nació para enumerar franquicias de anime: texto mono
corrido en gris, donde ningún elemento manda sobre otro. Aquí cada
línea es una categoría con nombre y explicación, así que el nombre
necesita jerarquía o las cuatro se leen como una nota al pie.
El nombre pasa a tipografía de titulares en rosa; la explicación se
queda en gris debajo, en su propia línea. */
.yk-page-realista .yk-serieslist--terrenos {
line-height: 1.5;
font-family: var(--yk-f-text);
font-size: 15px;
list-style: none;
padding: 0;
}
.yk-page-realista .yk-serieslist--terrenos li {
padding: var(--yk-s3) 0;
border-bottom: 1px solid var(--yk-line-2);
}
.yk-page-realista .yk-serieslist--terrenos li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.yk-page-realista .yk-serieslist--terrenos b {
display: block;
font-family: var(--yk-f-display);
font-size: 16px;
font-weight: 700;
color: var(--yk-neon);
margin-bottom: 2px;
}
/* —— Titulares de los cuatro terrenos ——
Venían como figcaption de .yk-showcase__item: mono a 11px, versaleta
y color --yk-mute. Ese estilo nació para un dato de servicio
("cicatrizado · 8 meses"), no para el NOMBRE de la categoría. En una
rejilla de cuatro piezas el nombre es lo que organiza la sección, y a
11px en gris no se ve — en móvil, directamente desaparece.
Se le da el rosa de marca y la tipografía de titulares, con un filete
corto delante que lo ata a la foto de arriba. Sigue siendo un pie de
foto, pero ahora se lee como el rótulo que es. */
.yk-page-realista .yk-showcase__item figcaption {
position: relative;
margin-top: 12px;
padding-left: 20px;
font-family: var(--yk-f-display);
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
line-height: 1.3;
color: var(--yk-neon);
}
.yk-page-realista .yk-showcase__item figcaption::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: 12px;
height: 2px;
background: var(--yk-neon);
}
/* —— Aire tras la caja de firma ——
.yk-signature trae margen superior propio pero no inferior, así que
el h3 de "Lo que no hacemos aquí" quedaba pegado a su borde. */
.yk-page-realista .yk-signature { margin-bottom: var(--yk-s6); }
/* Marco visible mientras falten fotos. Misma advertencia que en
anime y fine line: solo actúa con src="" vacío. */
.yk-page-realista img[src=""] {
display: block;
width: 100%;
background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
border: 1px dashed rgba(255,255,255,.22);
}
/* El marco de la hero NO lleva aspect-ratio propio: su alto lo fija la
columna de texto de al lado (ver la regla de .yk-hero__shot arriba). */
.yk-page-realista .yk-showcase__item img[src=""] { aspect-ratio: 4 / 5; height: auto; }
.yk-page-realista .yk-mech__media img[src=""] { aspect-ratio: 9 / 7; height: auto; }
/* El bloque de precio no necesita nada propio: .yk-price ya resuelve
el borde con acento y la insignia "€" sin agrandar ninguna cifra,
tal y como se decidió para toda la web. Si algún día esta sección
necesita algo distinto, va aquí y no como override global. */
/* ============================================================
NOSOTROS · page-nosotros.php
------------------------------------------------------------
Página de equipo, no landing transaccional. Reutiliza .yk-hero,
.yk-facts, .yk-artists/.yk-artist, .yk-mech, .yk-steps,
.yk-reviews, .yk-first__list, .yk-ctaband tal cual vienen de
04-components.css. Lo único propio de esta página es el
timeline (su elemento de firma, no se repite en ninguna otra
página del sitio) y los ajustes puntuales de abajo.
============================================================ */
/* Ocho secciones de densidad media: ni las once cortas de la home
ni las diez densas de las landings de estilo. Mismo criterio que
anime/fine line/realismo, valor idéntico por consistencia. */
.yk-page-nosotros {
--yk-pad-y: clamp(40px, 5vw, 88px);
}
/* —— Hero: foto de los dos fundadores, no un retrato vertical ——
.yk-hero__img trae aspect-ratio:4/5 (retrato) porque nació para
fotos de una sola pieza o de un artista solo. Aquí son Alberto y
Carmen juntos en el estudio: una proporción de retrato recorta a
uno de los dos. Se pasa a un apaisado suave, mismo valor que ya
usa el marco de "dónde estamos" de la portada (.yk-where__media).
CORREGIDO — la foto colgaba por debajo del texto. .yk-hero__grid
trae align-items:center desde 04-components: con la imagen más
alta que la columna de texto, "centrado" reparte la diferencia
arriba y abajo, y el resultado es una foto desplazada hacia abajo
respecto al párrafo con el que debería ir en paralelo.
La solución es la misma que ya usa .yk-hero--editorial para su
propia foto: la fila se estira (stretch), la imagen ocupa el 100%
del alto que fija la columna de texto y object-fit:cover recorta
el sobrante. Los dos bordes, superior e inferior, quedan a la
misma altura que el bloque de texto.
Solo por encima de 820px: por debajo, .yk-hero__grid pasa a una
columna y la imagen va primero (order:-1), donde no hay ninguna
fila que igualar y sí conviene una proporción fija. */
@media (min-width: 821px) {
.yk-page-nosotros .yk-hero__grid { align-items: stretch; }
.yk-page-nosotros .yk-hero__media { align-self: stretch; }
.yk-page-nosotros .yk-hero__img {
height: 100%;
aspect-ratio: auto;
object-fit: cover;
/* Suelo por si el texto de la izquierda fuese muy corto: sin
esto, una columna de texto baja dejaría una foto aplastada. */
min-height: 360px;
}
}
@media (max-width: 820px) {
.yk-page-nosotros .yk-hero__img { aspect-ratio: 9 / 7; }
}
/* —— (.yk-thesis, retirada) ——
Existió para la sección "Elegir estudio no es lo mismo que elegir
tatuador": dos modelos de estudio contrapuestos. Se retira la
sección entera porque argumentaba sobre el negocio en vez de dar
información útil al visitante — que no elige entre modelos de
estudio, elige entre tres personas. Lo único aprovechable de ese
bloque ("no cogemos estilos que no controlamos") se ha mudado a la
lista de "Lo que no hacemos" del bloque de cita. Nota conservada
por si alguien busca la clase. */
/* —— Cómo trabajamos: 5 pasos, no 4 ——
.yk-steps viene calibrado a 4 columnas porque así es el proceso en
home/anime/fine line/realismo. Aquí son 5 (escribir, responder,
reservar, boceto, sesión). Se sobrescribe SOLO en el rango de
escritorio donde el componente ya usa 1 fila (por encima de su
propio punto de corte a 860px): así no se pisa la regla de 2
columnas en tablet ni la de 1 columna en móvil, que siguen
intactas desde 04-components.css. */
@media (min-width: 861px) {
.yk-page-nosotros .yk-steps {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
/* ============================================================
Timeline — elemento de firma de esta página.
Fechado horizontal con línea conectada y un punto por hito, no
numerado (no es una secuencia de pasos a seguir, es historia ya
ocurrida). Deliberadamente distinto de .yk-steps para que no
parezca el mismo componente dos veces en la misma página.
============================================================ */
.yk-timeline {
list-style: none;
margin: var(--yk-s7) 0 0;
padding: 0;
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--yk-s5);
}
.yk-timeline::before {
content: "";
position: absolute;
top: 5px;
left: 0;
right: 0;
height: 1px;
background: var(--yk-line);
}
.yk-timeline__item {
position: relative;
padding-top: var(--yk-s5);
}
.yk-timeline__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--yk-night);
border: 2px solid var(--yk-neon);
}
/* El hito vigente (la incorporación de Guti) lleva el punto relleno
y con resplandor estático — mismo recurso que .yk-price o el
contador de .yk-steps, sin animación: un brillo fijo no tiene
coste de rendimiento ni necesita prefers-reduced-motion. */
.yk-timeline__item.is-current::before {
background: var(--yk-neon);
box-shadow: 0 0 12px rgba(255, 0, 156, .55);
}
.yk-timeline__date {
display: block;
font-family: var(--yk-f-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--yk-neon);
margin-bottom: 6px;
}
.yk-timeline__text {
display: block;
font-size: 14.5px;
line-height: 1.55;
color: var(--yk-mute);
}
@media (max-width: 760px) {
.yk-timeline {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.yk-timeline::before {
top: 0;
bottom: 0;
left: 5px;
right: auto;
width: 1px;
height: auto;
}
.yk-timeline__item {
padding: 0 0 var(--yk-s5) 26px;
}
.yk-timeline__item::before { top: 3px; }
}
/* —— Figura ancha (fachada) ——
Única foto suelta de la página sin componente existente que le
sirva: no es un retrato de artista (.yk-artist), ni el mecanismo
texto+imagen (.yk-mech), ni la foto de "dónde estamos" de la
portada. Un contenedor mínimo a ancho completo. */
.yk-page-nosotros .yk-figure--wide {
margin-top: var(--yk-s6);
}
.yk-page-nosotros .yk-figure--wide img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--yk-r-0);
display: block;
}
/* —— Bloque de cita: subtítulo que separa el "cómo" del "qué saber" ——
La sección tiene dos mitades: los cinco pasos (el proceso) y los
datos agrupados (dinero, tiempos, reglas). Sin un rótulo entre
medias, .yk-price aparece justo después del último paso y se lee
como si fuese un sexto paso.
No es un H2: la sección ya tiene el suyo y meter dos títulos del
mismo nivel rompería la jerarquía de encabezados. Se le da una
escala intermedia, entre el H2 de sección y los h3 que llevan
dentro .yk-price y .yk-before. */
.yk-page-nosotros .yk-cita__sub {
margin: var(--yk-s8) 0 0;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.2;
}
/* .yk-price ya trae margin-top:52px propio, pensado para cuando va
suelto tras un párrafo. Aquí viene inmediatamente detrás del
subtítulo, así que ese margen sobra y deja el rótulo huérfano
arriba, lejos de la caja que titula. */
.yk-page-nosotros .yk-cita__sub + .yk-price {
margin-top: var(--yk-s5);
}
/* —— Marco visible mientras falten fotos ——
Misma advertencia que en anime, fine line y realismo: solo actúa
con src="" vacío, no con un nombre de archivo que aún no existe. */
.yk-page-nosotros img[src=""] {
display: block;
width: 100%;
background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
border: 1px dashed rgba(255,255,255,.22);
}
.yk-page-nosotros .yk-artist img[src=""] { aspect-ratio: 1; height: auto; }
.yk-page-nosotros .yk-mech__media img[src=""] { aspect-ratio: 4 / 3; height: auto; }
.yk-page-nosotros .yk-figure--wide img[src=""] { aspect-ratio: 16 / 9; height: auto; }
/* El marco vacío del hero necesita el mismo trato que en realismo: la
regla genérica img[src=""] le devuelve height:auto, así que el marco
se calcularía por su cuenta y volvería a colgar por debajo del texto
—justo lo que acabamos de arreglar—. Se le devuelve el estirado. */
@media (min-width: 821px) {
.yk-page-nosotros .yk-hero__img[src=""] {
height: 100%;
min-height: 360px;
aspect-ratio: auto;
}
}
@media (max-width: 820px) {
.yk-page-nosotros .yk-hero__img[src=""] { aspect-ratio: 4 / 3; height: auto; }
}
/* ============================================================
CONTACTO · page-contacto.php
------------------------------------------------------------
Página de referencia, no de lectura: la maqueta prioriza que
los datos se localicen de un vistazo por encima del ritmo
editorial del resto del sitio.
Los cuatro bloques nuevos (.yk-map, .yk-nap, .yk-router y
.yk-rules) se quedan aquí y no suben a 04-components.css
porque hoy solo los usa esta página — mismo criterio con el
que .yk-timeline se quedó en /nosotros/. Si /guti/ acaba
reutilizando .yk-router, ese será el momento de promoverlo,
no antes.
============================================================ */
/* Cinco secciones cortas: con el ritmo de la portada (hasta
140px por sección) una página de 500 palabras se convierte en
scroll vacío. Mismo ajuste que anime, fine line y realismo,
algo más apretado porque aquí hay la mitad de bloques. */
.yk-page-contacto {
--yk-pad-y: clamp(36px, 4.5vw, 76px);
}
/* El H1 lleva el nombre del estudio y la ciudad: seis palabras
que a 120px (--yk-type-h1) ocupan cuatro líneas en escritorio. */
.yk-page-contacto h1 {
font-size: clamp(32px, 4.2vw, 58px);
line-height: 1.06;
}
/* —— Hero: caja ancha centrada, no columna a la izquierda ——
Sin imagen, el hero solo tenía .yk-measure (~60ch, anclado a la
izquierda del contenedor de 1200px): quien entra mira primero al
centro de la pantalla, y ahí no había nada — todo el peso quedaba
corrido hacia el borde izquierdo con una franja vacía a la derecha.
.yk-hero-center centra el bloque como una caja: más ancha que la
medida de lectura (~60ch) pero sin llegar a los 1200px del
contenedor completo, que dejaría el H1 a un tamaño de línea
incómodo. Texto centrado; los dos elementos con display:flex que
cuelgan de aquí (.yk-facts, .yk-cluster) se recentran aparte,
porque justify-content no hereda del text-align del padre. */
.yk-page-contacto .yk-hero-center {
max-width: clamp(640px, 62vw, 860px);
margin-inline: auto;
text-align: center;
}
.yk-page-contacto .yk-hero-center .yk-lead {
margin-inline: auto;
}
.yk-page-contacto .yk-hero-center .yk-facts,
.yk-page-contacto .yk-hero-center .yk-cluster {
justify-content: center;
}
.yk-page-contacto .yk-hero-center .yk-micro {
margin-inline: auto;
}
/* —— Introducción de sección (título y párrafo, ancho completo) ——
Las tres secciones de cuerpo (mapa, router, condiciones) abrían con
.yk-measure: título y párrafo apilados, pero acotados a ~60ch y
anclados a la izquierda del contenedor de 1200px. El resultado es
una franja vacía a la derecha del ancho de la página entera.
La primera corrección (título y prosa en dos columnas, como
.yk-note) tampoco era lo que hacía falta: aquí título y párrafo
van en el mismo orden vertical de siempre —título arriba, prosa
debajo— pero ninguno de los dos lleva ya un max-width de lectura.
Los dos ocupan el ancho real del contenedor.
El hero (bloque 1) usa .yk-hero-center, no este patrón: ahí el
contenido se centra como una caja porque es lo primero que se ve
al entrar; aquí, más abajo en la página, título y prosa se quedan
alineados a la izquierda y a ancho completo, que es lo normal para
un bloque de lectura una vez que el visitante ya está haciendo
scroll. */
.yk-page-contacto .yk-intro h2 {
margin: 0 0 var(--yk-s3);
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.15;
max-width: none;
}
.yk-page-contacto .yk-intro .yk-lead {
margin: 0;
max-width: none;
}
/* —— Mapa (fachada) ——
Es un con un SVG propio dentro. No hay iframe: el
embed de Google escribe cookies antes de cualquier
interacción y habría que meterlo tras el mismo muro de
consentimiento que analytics_storage.
El pie NO va superpuesto sobre el plano. La primera versión
lo llevaba en absoluto con un degradado, y en móvil tapaba la
parada de metro, la barra de escala y la atribución a
OpenStreetMap — que es obligatoria por licencia ODbL y no
puede quedar oculta. */
.yk-map {
margin: var(--yk-s6) 0 0;
border: 1px solid var(--yk-line-2);
border-radius: var(--yk-r-0);
overflow: hidden;
background: #08080a;
}
.yk-map img {
display: block;
width: 100%;
height: auto;
}
.yk-map__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--yk-s3);
padding: var(--yk-s4) var(--yk-s5);
border-top: 1px solid var(--yk-line-2);
background: var(--yk-card);
font-size: 14px;
color: var(--yk-mute-2);
}
.yk-map__foot p { margin: 0; }
@media (max-width: 520px) {
/* Con el pie en fila, el texto y el botón se reparten un
ancho que no da para los dos y el botón queda de 90px. */
.yk-map__foot {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.yk-map__foot .yk-btn { width: 100%; }
}
/* —— Datos + cómo llegar ——
Dos columnas por debajo del mapa: el NAP a la izquierda, las
tres vías de llegada a la derecha. El mapa va antes y a ancho
completo porque primero hay que ubicar y después detallar. */
.yk-loc {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
gap: var(--yk-s6) clamp(28px, 4vw, 56px);
align-items: start;
margin-top: var(--yk-s6);
}
@media (max-width: 900px) {
.yk-loc { grid-template-columns: minmax(0, 1fr); }
}
/* —— NAP ——
Va en , que el navegador pone en cursiva por defecto.
Rótulo en mono arriba y dato debajo, no en dos columnas: con
una dirección larga y un email de 27 caracteres, dos columnas
dejan el dato partido en tres líneas contra un rótulo de una. */
.yk-nap {
font-style: normal;
margin: 0;
border-top: 1px solid var(--yk-line-2);
}
.yk-nap > div {
display: grid;
gap: 3px;
padding: var(--yk-s4) 0;
border-bottom: 1px solid var(--yk-line-2);
}
.yk-nap__k {
font-family: var(--yk-f-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--yk-mute-2);
}
.yk-nap__v {
font-size: 16px;
color: var(--yk-paper);
overflow-wrap: anywhere; /* el email no rompe la columna en móvil */
}
.yk-nap__v small {
display: block;
margin-top: 2px;
font-size: 13.5px;
color: var(--yk-mute-2);
}
.yk-nap__v a { color: var(--yk-paper); text-decoration: none; }
.yk-nap__v a:hover,
.yk-nap__v a:focus-visible { color: var(--yk-neon); }
/* El horario de respuesta a mensajes es el dato que corrige la
fricción de la reseña de 1★: se marca en rosa para que no se
confunda con el horario de apertura, que va justo encima. */
.yk-nap > div.is-accent .yk-nap__k { color: var(--yk-neon); }
/* —— Cómo llegar ——
Tres modos de transporte. Filete rosa a la izquierda, el mismo
recurso de .yk-price y .yk-note--accent, para emparentarlos con
el resto del sistema sin crear otro lenguaje visual. */
.yk-getthere {
display: grid;
gap: var(--yk-s5);
}
.yk-getthere > div {
padding-left: var(--yk-s4);
border-left: 2px solid var(--yk-neon);
}
.yk-getthere h3 {
margin: 0 0 4px;
font-size: 17px;
}
.yk-getthere p {
margin: 0;
font-size: 15.5px;
line-height: 1.6;
color: var(--yk-mute);
max-width: 62ch;
}
/* —— Router de artista ——
Elemento de firma de la página. El estudio arriba a ancho
completo con acento de marca (es la acción primaria) y los
tres accesos directos debajo en igualdad de peso: quien ya ha
elegido tatuador no debería tener que pasar por el filtro. */
.yk-router {
display: grid;
gap: var(--yk-s4);
margin-top: var(--yk-s6);
}
.yk-router__main {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--yk-s4);
padding: var(--yk-s5) var(--yk-s6);
border: 1px solid var(--yk-line);
border-left: 3px solid var(--yk-neon);
border-radius: var(--yk-r-0);
background: linear-gradient(180deg, var(--yk-neon-soft), var(--yk-card));
}
.yk-router__main h3 { margin: 0 0 3px; font-size: 19px; }
.yk-router__main p { margin: 0; font-size: 15px; color: var(--yk-mute); }
.yk-router__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--yk-s4);
}
.yk-router__card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--yk-s5);
border: 1px solid var(--yk-line-2);
border-radius: var(--yk-r-0);
background: var(--yk-card);
transition: border-color var(--yk-t) var(--yk-ease);
}
.yk-router__card:hover { border-color: var(--yk-line); }
.yk-router__card h3 { margin: 0 0 4px; font-size: 18px; }
.yk-router__card h3 a { color: var(--yk-paper); text-decoration: none; }
.yk-router__card h3 a:hover,
.yk-router__card h3 a:focus-visible { color: var(--yk-neon); }
.yk-router__card p {
margin: 0 0 var(--yk-s4);
font-size: 15px;
color: var(--yk-mute);
}
/* El botón se ancla abajo para que las tres tarjetas lo alineen
aunque la especialidad de Guti ocupe dos líneas y la de
Alberto solo una. */
.yk-router__card .yk-btn { margin-top: auto; }
@media (max-width: 820px) {
.yk-router__grid { grid-template-columns: minmax(0, 1fr); }
.yk-router__main { flex-direction: column; align-items: stretch; }
.yk-router__main .yk-btn { width: 100%; }
}
/* —— Condiciones del estudio ——
Rejilla de rótulo + dato, no acordeón. Un desplegable obliga a
pulsar siete veces para leer siete líneas; aquí todo está a la
vista y se escanea. El
es el elemento correcto y de paso
el marcado coincide con el FAQPage que la plantilla emite.
Rótulo a la izquierda en columna fija: los siete rótulos son
cortos y de longitud parecida, así que una columna de 230px
los alinea sin partir ninguno. */
.yk-rules {
margin: var(--yk-s6) 0 0;
border-top: 1px solid var(--yk-line-2);
}
.yk-rules > div {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: var(--yk-s5);
padding: var(--yk-s4) 0;
border-bottom: 1px solid var(--yk-line-2);
}
.yk-rules dt {
margin: 0;
font-family: var(--yk-f-display);
font-size: 16px;
font-weight: 600;
color: var(--yk-paper);
}
.yk-rules dd {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: var(--yk-mute);
max-width: 68ch;
}
@media (max-width: 760px) {
.yk-rules > div {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
}
/* —— Marco visible mientras falte el mapa ——
Misma salvaguarda que el resto de páginas: solo actúa con
src="" vacío. Si el SVG todavía no está subido a
assets/img/, verás el icono de imagen rota, no este marco. */
.yk-page-contacto img[src=""] {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
border: 1px dashed rgba(255,255,255,.22);
}
/* ============================================================
FICHA DE ARTISTA · page-carmen.php
------------------------------------------------------------
Segunda ficha de artista del sitio, después de /alberto/.
Reutiliza .yk-hero__grid, .yk-facts, .yk-mech, .yk-artist__quote,
.yk-showcase__grid, .yk-reviews, .yk-price, .yk-ctaband y
.yk-profile__* tal cual.
Lo único exclusivo suyo es .yk-flash — los diseños ya dibujados y
disponibles —, que es a esta página lo que el bloque de
planificación de sesiones es a la de Alberto. Se queda aquí y no
sube a 04-components porque Alberto y Guti no trabajan así; mismo
criterio con el que .yk-router se quedó en /contacto/.
============================================================ */
/* Once secciones de densidad media: el token global (--yk-pad-y
hasta 140px) deja huecos muertos entre bloques. Mismo valor que
ya usan anime, fine line, realismo y nosotros, por consistencia. */
.yk-page-carmen {
--yk-pad-y: clamp(40px, 5vw, 88px);
}
/* —— Hero: que entre entero en la primera pantalla ——
Con el padding normal de sección arriba, el H1 y la foto quedaban
por debajo del pliegue. Se recorta solo el padding SUPERIOR (el
inferior mantiene el ritmo con la sección siguiente) y las migas
se pegan al header. */
.yk-page-carmen .yk-crumbs { padding-block: var(--yk-s4) 0; }
.yk-page-carmen .yk-hero {
padding-block: clamp(16px, 2vw, 32px) var(--yk-pad-y);
}
/* El token --yk-type-h1 llega a 120px, calibrado para titulares a
ancho completo. Aquí el H1 ocupa media columna y son ocho
palabras: necesita su propia escala, igual que anime y fine line. */
.yk-page-carmen .yk-hero h1 {
font-size: clamp(30px, 3.8vw, 52px);
line-height: 1.06;
}
/* Foto a la altura de la columna de texto, no a su propio ratio.
.yk-hero__img trae aspect-ratio:4/5 desde 04-components (pensado
para fotos verticales de una sola pieza): sobre una columna de
~550px eso da una caja de ~700px de alto, que empuja el hero fuera
del pliegue. Mismo criterio que ya usa /nosotros/: la fila se
estira, la imagen ocupa el 100% de esa altura y object-fit:cover
recorta el sobrante — así arranca a la misma línea que el eyebrow
Y cierra a la misma línea que el CTA, en vez de sobresalir. */
@media (min-width: 821px) {
.yk-page-carmen .yk-hero__grid { align-items: stretch; }
.yk-page-carmen .yk-hero__media { align-self: stretch; width: auto; }
.yk-page-carmen .yk-hero__img {
height: 100%;
aspect-ratio: auto;
object-fit: cover;
min-height: 340px;
max-height: min(64vh, 560px);
}
}
/* Por debajo de 820px, .yk-hero__grid pasa a una columna (04-components)
y la imagen va primero: ahí sí conviene una proporción fija y corta. */
@media (max-width: 820px) {
.yk-page-carmen .yk-hero__img { aspect-ratio: 4 / 3; height: auto; }
}
/* —— Diseños ya dibujados (elemento de firma) ——
Acento en MENTA y no en rosa, a propósito: en el resto de la ficha
el rosa marca la acción principal, y aquí hace falta distinguir la
segunda vía de conversión de la primera. */
.yk-page-carmen .yk-flash {
padding: clamp(28px, 4vw, 56px);
border: 1px solid var(--yk-line);
border-left: 3px solid var(--yk-good);
border-radius: var(--yk-r-0);
background: var(--yk-card);
}
.yk-page-carmen .yk-flash > h2 {
margin-top: 0;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.15;
max-width: 24ch;
}
.yk-page-carmen .yk-flash p { color: var(--yk-mute); max-width: 64ch; }
.yk-page-carmen .yk-flash .yk-eyebrow { color: var(--yk-good); }
.yk-page-carmen .yk-flash .yk-eyebrow::before { background: currentColor; }
/* Tira de diseños: cuadrados, no 4/5 como el portfolio. Son dibujos
sobre papel, no piezas sobre piel, y esa diferencia de formato es
lo que evita que se lean como trabajos ya hechos. */
.yk-page-carmen .yk-flash__strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--yk-s3);
margin: var(--yk-s5) 0 var(--yk-s3);
}
.yk-page-carmen .yk-flash__strip figure { margin: 0; overflow: hidden; }
.yk-page-carmen .yk-flash__strip img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
transition: transform var(--yk-t) var(--yk-ease);
}
.yk-page-carmen .yk-flash__strip figure:hover img { transform: scale(1.03); }
.yk-page-carmen .yk-flash__cta { margin-top: var(--yk-s5); margin-bottom: 0; }
@media (max-width: 640px) {
.yk-page-carmen .yk-flash__strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--yk-s2);
}
}
/* Marco visible mientras falten fotos reales. Misma salvaguarda que
el resto de páginas: solo actúa con src="" vacío, así que en
cuanto se rellena el src de cada , este marco desaparece
solo y manda la foto. */
.yk-page-carmen img[src=""] {
display: block;
width: 100%;
background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
border: 1px dashed rgba(255,255,255,.22);
}
.yk-page-carmen .yk-mech__media img[src=""] { aspect-ratio: 9 / 7; height: auto; }
.yk-page-carmen .yk-profile__figure img[src=""] { aspect-ratio: 9 / 7; height: auto; }
.yk-page-carmen .yk-showcase__item img[src=""] { aspect-ratio: 4 / 5; height: auto; }
.yk-page-carmen .yk-flash__strip img[src=""] { aspect-ratio: 1; height: auto; }
/* —— Separar el CTA de las fichas de datos, en el hero ——
.yk-facts ya trae su propio margin-top respecto al párrafo
anterior, pero no margin-bottom: el botón quedaba pegado a la
última fila de píldoras. */
.yk-page-carmen .yk-hero__cta {
margin-top: var(--yk-s5);
}
/* ============================================================
UNIFICACIÓN DEL MARCO DE HERO — home, anime y fine line
------------------------------------------------------------
/tatuaje-realista-malaga/ es la única página cuyo hero entra
entero en la primera pantalla. Medido en producción a 1440x900:
realista hero cierra a 862px (marco VACÍO, 586px)
anime hero cierra a 1142px (foto real, 658px)
fine line hero cierra a 1135px (foto real, 658px)
home hero cierra a 1111px (foto real, 775px)
La diferencia NO era el CSS de cada página: era que realismo
todavía no tiene foto subida. Su marco vacío se estira al alto
de la columna de texto, y por eso encaja. Las otras tres sí
tienen foto, y la foto impone su propio alto por aspect-ratio.
Toda la maquetación de heroes del sitio estaba escrita con el
selector img[src=""], que solo actúa sobre marcos vacíos: sobre
una foto real no aplica nunca. De ahí que ninguna corrección
anterior tuviera efecto en estas tres páginas.
Estas reglas replican el comportamiento de realismo SIN el
condicionante de src vacío: la foto se estira al alto que fija
la columna de texto y object-fit:cover recorta el sobrante, en
lugar de imponer su propia altura y empujar el hero fuera del
pliegue.
Solo por encima de 820px. Por debajo, .yk-hero__grid pasa a una
columna, la imagen va primero y sí conviene proporción fija y
corta: eso ya lo resuelve cada página y no se toca.
============================================================ */
@media (min-width: 821px) {
/* Home — el marco se llama .yk-hero__img, no .yk-hero__shot */
.yk-home .yk-hero__media { align-self: stretch; }
.yk-home .yk-hero__img {
height: 100%;
min-height: 420px;
max-height: 62vh;
aspect-ratio: auto;
object-fit: cover;
}
/* Anime */
.yk-page-anime .yk-hero__shot { align-self: stretch; }
.yk-page-anime .yk-hero__shot img {
height: 100%;
min-height: 420px;
max-height: 62vh;
aspect-ratio: auto;
object-fit: cover;
}
/* Fine line */
.yk-page-fineline .yk-hero__shot { align-self: stretch; }
.yk-page-fineline .yk-hero__shot img {
height: 100%;
min-height: 420px;
max-height: 62vh;
aspect-ratio: auto;
object-fit: cover;
}
/* Realismo: mismo tope, para que el día que suba su foto no
herede el problema que tienen hoy las otras tres. */
.yk-page-realista .yk-hero__shot img {
height: 100%;
min-height: 420px;
max-height: 62vh;
aspect-ratio: auto;
object-fit: cover;
}
}
/* —— Recorte de altura en los heroes con banda de titular ——
anime y fine line usan .yk-hero--editorial CON .yk-hero__top: el H1
va en una banda propia a ancho completo por encima de la rejilla,
lo que suma ~200px que realismo no tiene (allí el H1 vive dentro de
la columna de texto).
Esto recorta lo que el CSS puede recortar sin tocar el contenido:
padding superior, aire bajo el titular y escala del H1. NO basta
para meter el hero completo en 900px de alto — para eso habría que
mover el H1 dentro de la columna, que es un cambio de plantilla. */
@media (min-width: 821px) {
.yk-page-anime .yk-hero,
.yk-page-fineline .yk-hero {
padding-block: clamp(20px, 2.5vw, 40px) var(--yk-pad-y);
}
.yk-page-anime .yk-hero--editorial .yk-hero__top,
.yk-page-fineline .yk-hero--editorial .yk-hero__top {
margin-bottom: var(--yk-s4);
}
.yk-page-anime .yk-hero--editorial .yk-hero__top h1,
.yk-page-fineline .yk-hero--editorial .yk-hero__top h1 {
font-size: clamp(30px, 3.4vw, 48px);
line-height: 1.05;
}
}
/* —— Subir la foto dentro de su marco, en anime y fine line ——
El punto de recorte por defecto (--yk-hero-shot-pos: 50% 15%,
fijado en 04-components) encuadra 15% por debajo del borde
superior. Con la caja ya nivelada con el texto (ver bloque
anterior), lo que quedaba más bajo era el encuadre dentro de la
foto, no la caja. Se sube al 4% superior. */
@media (min-width: 821px) {
.yk-page-anime .yk-hero--editorial .yk-hero__shot img,
.yk-page-fineline .yk-hero--editorial .yk-hero__shot img {
object-position: 50% 4%;
}
}
/* ============================================================
FICHA /guti/
------------------------------------------------------------
Reutiliza tal cual .yk-hero--editorial, .yk-facts, .yk-showcase
(ya en 3 columnas por defecto — encaja justo con las 3 piezas de
esta ficha, sin modificador), .yk-steps, .yk-principles--3,
.yk-prose blockquote (citas), .yk-agenda, .yk-tiers, .yk-no/.yk-sub,
.yk-todo y .yk-datasheet (04-components.css).
Lo único exclusivo de esta página es el recorte de padding vertical
(mismo criterio que anime/fine line/realismo/nosotros/carmen) y el
marco de imagen ausente vía img[src=""], con un aspect-ratio propio
por cada hueco de foto de la página.
============================================================ */
.yk-page-guti {
--yk-pad-y: clamp(40px, 5vw, 88px);
}
.yk-page-guti .yk-crumbs { padding-block: var(--yk-s4) 0; }
.yk-page-guti .yk-hero {
padding-block: clamp(16px, 2vw, 32px) var(--yk-pad-y);
}
.yk-page-guti .yk-hero h1 {
font-size: clamp(30px, 3.8vw, 52px);
line-height: 1.06;
}
/* Foto a la altura de la columna de texto — mismo criterio que
/carmen/ y /nosotros/: la fila se estira y object-fit:cover
recorta el sobrante, en vez de que la foto imponga su propio
aspect-ratio y desnivele el hero. */
@media (min-width: 821px) {
.yk-page-guti .yk-hero--editorial .yk-hero__lower { align-items: stretch; }
.yk-page-guti .yk-hero--editorial .yk-hero__shot { align-self: stretch; }
.yk-page-guti .yk-hero--editorial .yk-hero__shot img {
height: 100%;
aspect-ratio: auto;
object-fit: cover;
min-height: 340px;
max-height: min(60vh, 500px);
}
}
@media (max-width: 820px) {
.yk-page-guti .yk-hero--editorial .yk-hero__shot img { aspect-ratio: 4 / 3; height: auto; }
}
.yk-page-guti .yk-hero__cta { margin-top: var(--yk-s5); }
/* —— Marco visible mientras falten fotos reales ——
Misma salvaguarda que anime/fine line/realismo/carmen: solo actúa
con src="" vacío, así que al rellenar cada el marco
desaparece solo. */
.yk-page-guti img[src=""] {
display: block;
width: 100%;
background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
border: 1px dashed rgba(255,255,255,.22);
}
.yk-page-guti .yk-hero--editorial .yk-hero__shot img[src=""] { aspect-ratio: 4 / 5; height: auto; }
.yk-page-guti .yk-profile__figure img[src=""] { aspect-ratio: 4 / 3; height: auto; }
.yk-page-guti .yk-showcase__item img[src=""] { aspect-ratio: 4 / 5; height: auto; }
.yk-page-guti .yk-macro img[src=""],
.yk-page-guti .yk-diagram img[src=""] { aspect-ratio: 16 / 7; height: auto; }
/* —— Bloque 8 sin visual, a propósito ——
"Para quién no" es la única sección de la ficha sin foto ni
diagrama (decisión de landing-writer): el texto necesita algo
más de aire arriba para no leerse pegado al bloque anterior. */
.yk-page-guti .yk-no-section { padding-top: calc(var(--yk-pad-y) * 1.1); }