/* La página pública de un salón, y la de reservar. Se monta SOBRE `kabelo.css`, que es el sistema de diseño del producto: sus tokens `--k-*`, su tipografía, su escala de espacio y su modo oscuro. La primera versión de este archivo se inventó tokens propios —`--marca`, `--fondo`, `--radio`, una serif distinta— y con eso la cara pública del producto dejó de parecerse al producto. Un sistema de diseño que sólo cumple la consola no es un sistema de diseño. Lo único propio de aquí es lo que la consola no tiene: una portada, una franja de datos y una carta de precios. Todo lo demás sale de los tokens. El color del negocio SOBRESCRIBE `--k-brand` al cargar, así que el botón primario, los enlaces y los realces se tiñen solos sin reglas nuevas. */ /* --- Cimientos -------------------------------------------------------------- */ * { box-sizing: border-box; } /* `hidden` gana siempre. Es un atributo, y el navegador lo aplica con una regla de la más baja prioridad: cualquier `display` propio lo pisa. Sin esto, el botón de reservar seguía visible en un salón sin agenda —tenía `display: inline-flex` por ser botón— y llevaba a una pantalla que no existe. */ [hidden] { display: none !important; } body { margin: 0; background: var(--k-bg); color: var(--k-text); font: var(--k-body-lg) var(--k-font-sans); } /* Los títulos, en la tipografía de TÍTULOS del sistema. Aquí hubo una serif inventada —Georgia a pelo— buscando "aire de salón", y se quitó: meter una familia que nadie eligió es lo mismo que inventarse los colores. Ahora la serif existe, se llama `--k-font-display`, la eligió Héctor y vive en `kabelo.css` con su archivo propio. Entra por la puerta. `h1` y `h2` la usan porque son los que dan el tono de la página. `h3` NO: es el nombre de un servicio dentro de una tarjeta, va junto a su precio y su duración, y ahí lo que hace falta es leer rápido. Una serif pequeña al lado de un precio en sans se ve como un descuido, no como un detalle. */ h1, h2, h3 { font-weight: 600; color: var(--k-text); } h1, h2 { font-family: var(--k-font-display); /* La serif ya trae su propio ritmo: el `-.02em` que aprieta la sans le come el aire entre astas y la vuelve una mancha. */ letter-spacing: -.01em; } h3 { font-family: var(--k-font-sans); letter-spacing: -.02em; } /* Más grande que antes: una serif con este peso aguanta el tamaño, y el titular es lo único que se lee entero en la primera pantalla. */ h1 { margin: 0; font-size: clamp(2.4rem, 6.5vw, 4rem); line-height: 1.02; } h2 { margin: 0 0 var(--k-space-5); font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.12; } h3 { margin: 0 0 var(--k-space-1); font-size: var(--k-h3); } .sub { margin: 0 0 var(--k-space-4); color: var(--k-text-muted); } .cargando { max-width: 640px; margin: 0 auto; padding: var(--k-space-20) var(--k-space-6); text-align: center; color: var(--k-text-muted); } /* --- La barra --------------------------------------------------------------- */ /* Pegada arriba, con la acción siempre a la vista: quien bajó hasta el equipo y se decidió no tiene que volver a subir a buscar el botón. */ .barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--k-space-4); min-height: var(--k-header); padding: var(--k-space-2) clamp(var(--k-space-4), 4vw, var(--k-space-10)); background: color-mix(in srgb, var(--k-surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--k-border); } .barra-marca { display: flex; align-items: center; gap: var(--k-space-3); margin-right: auto; /* Que pueda encogerse. Sin esto, un nombre largo —"FMNavarro Hair Studio", que no es raro— empujaba el resto de la barra fuera de la pantalla: en un teléfono de 360px el botón de reservar quedaba 306 píxeles a la derecha del borde. No es que estuviera apretado: no se veía, y la página se movía de lado. El clásico de flexbox: un elemento no encoge por debajo de su contenido a menos que se le diga. */ min-width: 0; color: inherit; text-decoration: none; font-family: var(--k-font-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .barra-marca img, .barra-marca .inicial { width: 38px; height: 38px; border-radius: var(--k-radius-md); object-fit: cover; /* El logo NO encoge. en la marca dejaba que se comprimiera hasta desaparecer, y la barra se quedaba sin la marca del negocio — que es justo lo que la barra existe para enseñar. */ flex: none; } /* Sólo el TEXTO cede: se recorta con puntos suspensivos antes que empujar el botón fuera de la pantalla. */ .barra-marca > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barra-nav { display: flex; gap: var(--k-space-6); } .barra-nav a { color: var(--k-text-muted); text-decoration: none; font: var(--k-body); } .barra-nav a:hover { color: var(--k-text); } @media (max-width: 720px) { /* En un teléfono la barra guarda sólo lo que se usa. Los enlaces de SECCIÓN se van: están a un dedo hacia abajo, y un menú desplegable para tres es un toque de más. Pero "Mi cuenta" NO es una sección de esta página: es la entrada a lo suyo —sus citas, sus puntos, sus pruebas— y no está en ninguna parte de la landing. Escondiéndolo entero, en un teléfono no había forma de llegar. */ .barra-nav a:not(.barra-cuenta) { display: none; } .barra-nav { gap: var(--k-space-3); } .barra-marca { font-size: 1rem; } /* Todo un poco más junto: en 360px —el ancho de un teléfono barato, que es con lo que entra media clientela— el botón de reservar se salía doce píxeles por la derecha. Doce píxeles es que no está. */ .barra { gap: var(--k-space-2); padding-left: var(--k-space-3); padding-right: var(--k-space-3); } .barra .boton.chico { padding: 0 var(--k-space-4); } .barra-marca img, .barra-marca .inicial { width: 32px; height: 32px; } /* En el teléfono más estrecho, el nombre se va y se queda el logo. Recortado con puntos suspensivos, "FMNavarro Hair St…" ocupa el sitio del botón sin decir nada que el logo no diga ya. El logo identifica solo, y sigue llevando al inicio. */ .barra-marca > span:last-child { display: none; } /* El botón no se parte en dos renglones: un botón de dos líneas en una barra de cincuenta píxeles se lee como algo roto. */ .barra .boton { white-space: nowrap; } } .inicial { display: grid; place-items: center; background: var(--k-brand); color: var(--k-on-brand, #fff); font-family: var(--k-font-sans); font-weight: 700; } /* El margen de la página, en un solo sitio. Cada bloque calculaba el suyo —la portada con un `clamp`, la franja con otro ancho máximo, las secciones con un tercero— y el resultado era que el titular arrancaba en 48px, la franja en 122 y los títulos de sección en 52. Tres márgenes distintos en la misma página se ven aunque no se sepa por qué: es exactamente lo que hace que algo parezca maquetado a mano. `--k-columna` es el ancho útil y `--k-aire` el respiro contra el borde en las pantallas estrechas. `--k-margen` es lo que hay que separar del borde de la ventana para caer en la primera columna, y lo usan TODOS: la portada, la franja, las secciones, el cierre y el pie. `max(...)` y no una resta a secas: por debajo de 1240px la resta se vuelve negativa y el contenido se saldría de la pantalla. */ #salon, #reserva, #panel, #entrar, #listo, #sinsalon { --k-columna: 1240px; --k-aire: clamp(var(--k-space-5), 4vw, var(--k-space-8)); --k-margen: max(var(--k-aire), calc((100% - var(--k-columna)) / 2 + var(--k-aire))); } /* --- La portada ------------------------------------------------------------- */ .portada { /* El respiro vertical, con nombre: la foto de al lado tiene que poder cancelarlo para llegar al borde de la sección. Ver `.portada.con-foto`. */ --k-portada-aire: clamp(var(--k-space-10), 6vw, var(--k-space-16)); display: grid; align-items: center; min-height: min(58vh, 460px); /* El texto arranca en la primera columna, igual que todos los títulos de sección: es lo que hace que la página se lea como una rejilla y no como bloques apilados cada uno por su cuenta. */ padding: var(--k-portada-aire) var(--k-margen); /* Los DOS colores del negocio. Antes el acento se guardaba, se pintaba en el panel y en la landing no hacía nada: cambiarlo no cambiaba nada, que es la peor clase de ajuste. Aquí es el segundo tono del degradado, y con eso la portada de dos salones distintos deja de parecerse. */ background: linear-gradient(135deg, color-mix(in srgb, var(--k-brand) 14%, var(--k-bg)) 0%, var(--k-bg) 55%, color-mix(in srgb, var(--k-accent) 12%, var(--k-bg)) 100%); } /* En el TELÉFONO, el texto va encima de la foto y sobre un velo. El velo no es decoración: la foto la sube el salón y no hay forma de saber si es clara, así que sin él un titular blanco sobre una pared blanca desaparece. Se degrada hacia la derecha para que la foto se siga viendo. */ .portada.con-foto { background: linear-gradient(90deg, rgba(13, 27, 32, .86) 0%, rgba(13, 27, 32, .55) 55%, rgba(13, 27, 32, .25) 100%), /* Encuadrada por arriba: una portada apaisada recortada al centro se come la parte de arriba, que es donde suele estar el rótulo del local. */ var(--foto) center top / cover no-repeat; } .portada.con-foto h1, .portada.con-foto .lema { color: #fff; } /* En pantalla ancha, la portada se PARTE: el texto a un lado, la foto al otro. Encima de la foto, el titular necesita un velo que oscurece la foto entera — la mitad del sitio se gasta en tapar lo único que el salón subió para enseñar. Al lado, ni el texto pelea con la imagen ni la imagen se apaga: el titular se lee sobre el fondo de la página, negro sobre claro, y la foto se ve tal como es. Es también lo que da a la página su primer renglón de rejilla. Todo lo que viene debajo arranca del mismo margen izquierdo que este titular. */ @media (min-width: 900px) { .portada.con-foto { /* La foto un poco más ancha que el texto: es la que tiene que dominar la primera pantalla. */ grid-template-columns: minmax(0, 1fr) 1.15fr; align-items: center; gap: clamp(var(--k-space-8), 5vw, var(--k-space-16)); /* Fuera el velo y el fondo: la foto pasa a ser una columna, no un tapiz. */ background: var(--k-bg); /* La foto llega AL BORDE de la ventana. Cortada por el borde se lee como una ventana a la que le sigue algo; con un margen a la derecha se lee como una imagen pegada en una diapositiva. */ padding-right: 0; overflow: hidden; } .portada.con-foto::after { content: ''; display: block; align-self: stretch; /* Sin alto propio se colapsaría: la fila la marca el texto, y una columna vacía a su lado no mide nada. */ min-height: min(58vh, 460px); /* Y CANCELA el respiro vertical de la portada para llegar a los dos bordes. Sin esto la foto terminaba ochenta píxeles antes del final de la sección, la franja se montaba sobre ese hueco vacío en vez de sobre la foto, y entre las dos quedaba una franja de fondo que hacía que la portada y los datos se leyeran como dos bloques sueltos. Héctor lo dijo tal cual: "el encabezado, no sé por qué ya no se ve la franja, estaba mejor". */ margin-block: calc(var(--k-portada-aire) * -1); /* Y se FUNDE con el texto por la izquierda, en vez de cortarse en seco. Sin esto la foto empieza con una línea recta a media pantalla, y la portada se lee como dos bloques pegados: un texto y una foto. Con el degradado el fondo de la página entra en la foto y las dos partes pasan a ser una sola imagen — que es lo que hace la maqueta. Es también lo que salva a una portada pequeña: el borde izquierdo, que es donde el ojo compara la foto con el texto nítido de al lado, queda cubierto por el fondo. El degradado va PRIMERO porque las capas de fondo se apilan de arriba abajo: escrito después quedaría debajo de la foto y no se vería. */ background: linear-gradient(90deg, var(--k-bg) 0%, color-mix(in srgb, var(--k-bg) 55%, transparent) 12%, transparent 30%), var(--foto) center top / cover no-repeat; } /* Una foto pequeña NO cambia el diseño de la portada. Se probaron las dos salidas y las dos son peores que el problema. Con `contain` queda una banda delgada con aire muerto arriba y abajo. Con la foto reducida a su propio tamaño, queda una tarjeta flotando en medio de la sección, sin llegar a los bordes — Héctor lo señaló con dos flechas: "debe ocupar el alto completo de la sección". Y las dos comparten el mismo error de fondo: deformar el diseño de todos para tapar un archivo que no da la talla. La portada llena su columna SIEMPRE, y a quien subió una foto pequeña se le dice en el panel, que es donde puede cambiarla. */ /* Sobre el fondo de la página, el blanco desaparece: vuelve el color normal del texto, que es lo que se lee. */ .portada.con-foto h1 { color: var(--k-text); } .portada.con-foto .lema { color: var(--k-text-muted); } } .portada-texto { max-width: 620px; } .lema { margin: var(--k-space-3) 0 0; font-size: 1.05rem; color: var(--k-text-muted); } .acciones { display: flex; flex-wrap: wrap; gap: var(--k-space-2); margin-top: var(--k-space-8); } /* --- Botones ---------------------------------------------------------------- */ .boton { /* La altura de control del sistema: esto se toca con el pulgar, de pie. */ min-height: var(--k-control); display: inline-flex; align-items: center; justify-content: center; gap: var(--k-space-2); padding: 0 var(--k-space-6); /* Con el borde de CONTROL y una sombra. Llevaba `--k-border`, que es el filete de separar tarjetas: sobre el fondo crema daba 1.07 de contraste y el botón secundario se veía como una palabra flotando, no como algo que se toca. La sombra hace el resto — un control tiene que parecer que está por encima de la página, no impreso en ella. */ border: 1px solid var(--k-border-control); border-radius: var(--k-radius-pill); background: var(--k-surface); color: var(--k-text); box-shadow: var(--k-shadow-sm); font: 600 var(--k-button) var(--k-font-sans); text-decoration: none; transition: transform var(--k-fast), box-shadow var(--k-fast), background var(--k-fast); } /* Al pasar por encima sube: el movimiento y la sombra juntos son lo que dice "esto responde". Sólo uno de los dos se lee como un parpadeo. */ .boton:hover { transform: translateY(-1px); box-shadow: var(--k-shadow-drop); } @media (prefers-reduced-motion: reduce) { .boton { transition: box-shadow var(--k-fast); } .boton:hover { transform: none; } } /* La tinta de encima se CALCULA, no se supone. Estaba en `#fff` fijo, y con el azul petróleo de fábrica se lee perfecto. Pero el color lo elige el negocio, y un crema, un amarillo o un rosa pálido dejaban el texto blanco sobre su propio color: el botón se veía vacío. `--k-on-brand` la pone `assets/color.js` al aplicar la marca, midiendo cuál de las dos —blanca o negra— contrasta más con ese color. El respaldo mantiene el comportamiento de siempre si el guion no llegó o el negocio no puso color. */ .boton.principal { background: var(--k-brand); border-color: var(--k-brand); color: var(--k-on-brand, #fff); box-shadow: var(--k-shadow-drop); } .boton.chico { min-height: var(--k-btn-md); padding: 0 var(--k-space-5); } .boton.grande { min-height: 56px; width: 100%; font-size: 1rem; } .boton svg { width: 18px; height: 18px; flex: none; } /* --- La franja de datos ----------------------------------------------------- */ /* Lo que se pregunta antes de ir, en una línea: a qué hora abren, dónde están y cómo escribirles. Montada sobre la portada porque es la continuación de la primera impresión, no una sección aparte. */ .franja { /* Rejilla y no fila. Con la calificación y el mapa dentro son seis datos, y en fila se partían en cuatro arriba y dos abajo, cada uno de un ancho distinto y sin alinear con los de encima. Se leía como un renglón que se desbordó. En rejilla, las columnas caen unas debajo de otras: dos filas de cuatro y de dos siguen siendo dos filas, pero se leen como una tabla. Y en un teléfono cada dato ocupa su renglón entero, que es lo que hace que se puedan tocar los dos que son ligas. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--k-space-4) var(--k-space-6); /* Lo que se alinea de una tarjeta es su BORDE, no su texto. La franja es una tarjeta: su contenido lleva relleno propio, igual que el nombre dentro de una tarjeta de servicio. Lo que tiene que caer en la columna es el borde, a la misma altura que el borde de la primera tarjeta de la carta y que el título de la sección de arriba. Y se consigue con el MARGEN, no con un ancho máximo: `--k-margen` ya es la distancia exacta desde el borde de la ventana hasta la columna, en las dos direcciones y en cualquier tamaño de pantalla. Con `max-width` y `auto` hacen falta dos cuentas que tienen que dar lo mismo, y no daban. */ /* Bien montada sobre la portada: `-32px` la dejaba a medio camino, con un dedo de fondo asomando entre la foto y la tarjeta. */ margin: calc(var(--k-space-12) * -1) var(--k-margen) 0; padding: var(--k-space-5); position: relative; background: var(--k-surface-raised); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); box-shadow: var(--k-shadow-md); } .franja:empty { display: none; } .dato { display: flex; align-items: center; gap: var(--k-space-3); } /* En la variante legible: `--k-brand` a secas es el color que el negocio eligió mirando la pantalla clara, y sobre el fondo oscuro estos iconos quedaban del mismo tono que la tarjeta. */ .dato svg { width: 22px; height: 22px; flex: none; color: var(--k-brand-texto); } .dato .k { display: block; font: var(--k-small) var(--k-font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--k-text-muted); } .dato .v { font-weight: 600; } /* La estrella de la calificación va RELLENA y en el acento. Los demás iconos de la franja son de trazo porque son etiquetas: dicen de qué habla el dato que está al lado. Éste no es una etiqueta, es la nota — y una estrella hueca junto a un 4.9 se lee como una estrella vacía, que es justo lo contrario de lo que dice el número. */ .dato .icono-estrella { fill: var(--k-accent-texto); stroke: var(--k-accent-texto); } @media (max-width: 900px) { /* En el teléfono la franja deja de montarse sobre la portada. Superpuesta necesita que la portada le deje sitio debajo, y en una pantalla estrecha la franja crece a cuatro renglones: se comía el botón de reservar. Aquí baja y se apoya, sin margen negativo. El margen lateral es el MISMO `--k-margen` de siempre, sólo se repite para poder cambiar el de arriba. Tenía uno propio de 16px y era el único trozo de la página que no caía en la columna. */ .franja { margin: 0 var(--k-margen); } } /* --- Los servicios de la reserva, por categoría ------------------------------ */ /* Agrupados, con el nombre del grupo encima. Eran veinte casillas seguidas. Agrupadas se busca por donde uno ya piensa, y es lo que hace que el atajo de la portada signifique algo. */ .grupo { display: contents; } .grupo-titulo { /* De borde a borde de la rejilla: un encabezado que ocupa una celda se lee como una opción más, no como el título de las que vienen debajo. */ grid-column: 1 / -1; margin: var(--k-space-4) 0 0; font: var(--k-small) var(--k-font-sans); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--k-text-muted); } .grupo:first-child .grupo-titulo { margin-top: 0; } /* El grupo por el que se llegó, señalado. Se marca el TÍTULO y no las casillas: teñir cinco opciones se lee como que ya están elegidas, y no lo están — elegir por alguien es decidirle la cita. */ .grupo.destacado .grupo-titulo { color: var(--k-accent-texto); } .grupo.destacado .grupo-titulo::after { content: '· lo que buscabas'; margin-left: var(--k-space-2); text-transform: none; letter-spacing: 0; font-weight: 400; } /* --- El video, como tarjeta --------------------------------------------------- Nunca un reproductor incrustado: eso traería los scripts y las cookies de otro dominio a la página de un salón. Ver `src/video.js`. */ .video-tarjeta { display: grid; grid-template-columns: 1fr; align-items: stretch; border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); overflow: hidden; background: var(--k-surface); color: inherit; text-decoration: none; transition: transform var(--k-fast), box-shadow var(--k-fast); } .video-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--k-shadow-md); } @media (prefers-reduced-motion: reduce) { .video-tarjeta { transition: none; } .video-tarjeta:hover { transform: none; } } @media (min-width: 720px) { /* La portada manda: es lo que hace que alguien quiera tocarla. */ .video-tarjeta { grid-template-columns: 1.6fr 1fr; } } .video-portada { display: block; aspect-ratio: 16 / 9; /* Sin portada, el color del negocio y no un gris: sigue siendo su tarjeta aunque no haya subido la imagen. */ background: linear-gradient(120deg, color-mix(in srgb, var(--k-brand) 80%, #000), color-mix(in srgb, var(--k-brand) 45%, #000)); } .video-portada.con-foto { background: var(--foto) center / cover no-repeat; } .video-texto { display: flex; flex-direction: column; justify-content: center; gap: var(--k-space-1); padding: var(--k-space-6); } .video-texto strong { font-size: 1.1rem; } .video-texto .sub { margin: 0; } /* El triángulo, que es lo que dice "esto es un video" sin escribirlo. */ .video-play { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--k-space-3); border-radius: var(--k-radius-pill); background: var(--k-brand); color: var(--k-on-brand, #fff); } .video-play svg { width: 22px; height: 22px; } /* --- El atajo a la reserva --------------------------------------------------- */ /* Debajo de la franja, y con la misma forma de tarjeta ancha. Quien llega por un código QR viene a ver si puede sentarse, no a leer. Esto abre la pantalla de reservar con la categoría puesta, en vez de en blanco. */ .atajo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-5); margin: var(--k-space-10) var(--k-margen) 0; padding: var(--k-space-5); background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); } .atajo-texto { display: flex; flex-direction: column; gap: var(--k-space-1); /* Con un mínimo, para que en una pantalla intermedia el texto no se parta en una columna de dos letras antes de decidirse a bajar de línea. */ flex: 1 1 12rem; } .atajo-texto strong { font-size: 1.15rem; } .atajo-texto .sub { margin: 0; } /* Las puertas: una rejilla, no una fila. En fila, una categoría con nombre largo estira su casilla y deja las otras tres encogidas, y eso se lee como que una importa más que las demás. En rejilla todas miden igual, que es lo que son: cuatro caminos equivalentes. */ .atajo-categorias { flex: 3 1 22rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--k-space-2); } .atajo-categorias:empty { display: none; } .puerta { /* El clásico de las rejillas: un hijo no encoge por debajo de su contenido a menos que se le diga, y con eso la casilla desborda su columna. */ min-width: 0; display: flex; flex-direction: column; gap: 2px; /* Relleno lateral corto: lo que va dentro es un nombre de categoría, y los nombres los pone el negocio. "Tratamientos" no cabía y el borde le cortaba la última letra. Cada píxel de relleno es un píxel menos para el nombre. */ padding: var(--k-space-3); border: 1px solid var(--k-border); border-radius: var(--k-radius-md); background: var(--k-bg); color: inherit; text-decoration: none; transition: border-color var(--k-fast), transform var(--k-fast); } .puerta:hover { border-color: var(--k-brand); transform: translateY(-1px); } .puerta strong { font-size: .88rem; /* Red de seguridad, no la solución: `break-word` sólo parte una palabra que de verdad no cabe de ninguna manera. Con `anywhere` partía "Tratamientos" en "Tratamient/os" aun cuando bastaba con estrechar el relleno, y un nombre partido a la mitad se lee peor que uno pequeño. */ overflow-wrap: break-word; } .puerta span { color: var(--k-text-muted); font: var(--k-small) var(--k-font-sans); } .atajo-ir { /* 17rem y no 13: con 13 los cuatro pasos no caben en un renglón y "Hora" bajaba sola a una segunda línea, descentrada bajo las otras tres. Una cuenta de pasos que se parte deja de leerse como una cuenta. */ flex: 1 1 17rem; display: flex; flex-direction: column; align-items: stretch; gap: var(--k-space-2); } /* Los pasos que faltan, numerados. "Reservar" sin saber si son dos toques o diez es lo que hace que alguien prefiera mandar un WhatsApp y quedarse esperando. Cuatro pasos cortos dicen que se acaba pronto. */ .atajo-pasos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k-space-1) var(--k-space-3); margin: 0; padding: 0; list-style: none; counter-reset: paso; color: var(--k-text-muted); font: var(--k-small) var(--k-font-sans); } .atajo-pasos li { display: flex; align-items: center; gap: var(--k-space-1); counter-increment: paso; } .atajo-pasos li::before { content: counter(paso); display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: var(--k-radius-pill); background: var(--k-border); color: var(--k-text); font-size: .68rem; font-weight: 600; } /* --- Bloques ---------------------------------------------------------------- */ /* El ancho de la página. Eran 1100px, y con cuatro tarjetas por fila la rejilla se quedaba corta: en una pantalla de 1280 sobraban doscientos píxeles a cada lado y el contenido se leía como una columna estrecha en medio de un folio. 1240 es lo que hace que quepan cuatro tarjetas de servicio sin apretarlas. */ .bloque { max-width: var(--k-columna); margin: 0 auto; padding: clamp(var(--k-space-10), 6vw, var(--k-space-16)) var(--k-aire); } /* El encabezado de una sección: la categoría, el título y la salida. Antes era un `

` centrado y nada más. Centrado y solo, un título se lee como el de una plantilla; con la categoría encima en letra pequeña y la salida a la derecha, la sección se lee como parte de un estudio — y de paso el ojo encuentra dónde empieza cada bloque sin tener que leerlo. La categoría la fija el producto y el título lo escribe el negocio. Ver `src/secciones.js`: uno ancla la sección para quien llega de fuera, el otro es la voz de la casa. */ .cabeza-bloque { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--k-space-4); margin-bottom: var(--k-space-6); } .cabeza-texto { min-width: 0; } .cabeza-bloque h2 { margin: 0; } .cabeza-bloque .sub { margin: var(--k-space-2) 0 0; } /* La categoría. Pequeña, espaciada y en el acento del negocio: tiene que leerse como una etiqueta y no competir con el título que va debajo. El filete corto delante es lo que la separa del texto normal sin necesidad de una caja. */ .ojal { display: flex; align-items: center; gap: var(--k-space-2); margin: 0 0 var(--k-space-2); font: var(--k-small) var(--k-font-sans); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--k-accent-texto); } .ojal::before { content: ''; width: 22px; height: 2px; flex: none; background: currentColor; border-radius: 2px; } /* La salida de la sección: "ver todo". Un enlace y no un botón a la vista: lo que hace es enseñar el resto de lo que ya está en la página, no ejecutar nada. Va al final del renglón del título porque ahí es donde se busca cuando la lista se acaba y falta algo. */ .ver-todo { flex: none; align-self: flex-end; padding: 0; border: 0; background: none; color: var(--k-brand-texto); font: var(--k-body) var(--k-font-sans); font-weight: 600; cursor: pointer; } .ver-todo:hover { color: var(--k-accent-texto); } .ver-todo span { display: inline-block; transition: transform .15s ease; } .ver-todo:hover span { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .ver-todo span { transition: none; } } /* La carta, en tarjetas y no en lista. Una lista con puntitos parece un menú de comida rápida. Cada servicio en su tarjeta, con el precio grande, es lo que un salón cuelga en la pared. */ .cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--k-space-4); /* Todas del mismo alto, con una condición. Antes iban con `align-items: start` porque estirarlas dejaba a las que no tienen foto con un rectángulo vacío debajo del precio. Pero escalonadas tampoco se veía bien: una carta con dos fotos y tres sin ellas quedaba dentada, y eso fue lo que Héctor enseñó en su captura. La salida no es elegir entre las dos: es que la que no tiene foto tampoco tenga hueco. Abajo, `.cartas:has(.con-foto) .carta:not(.con-foto)::before` le pone un marcador del mismo alto — así todas miden igual, nadie tiene un agujero, y se nota qué servicio le falta la foto. Sólo cuando ALGUNA tiene foto: en una carta sin ninguna, un marcador en cada tarjeta sería adorno repetido cinco veces. */ align-items: stretch; } .cartas:not(:has(.con-foto)) { align-items: start; } /* La lista recortada enseña sólo la primera fila. Se esconde con CSS y no quitando las tarjetas del HTML: así "ver todo" no tiene que volver a pintar nada —no hay parpadeo, no se pierde el sitio— y quien llega con el buscador del navegador encuentra igual el servicio que buscaba. `:nth-child(n + 5)` y no un número calculado: cuatro es lo que llena una fila en esta rejilla, y el día que la rejilla cambie este número cambia con ella. */ .cartas[data-recortado] > :nth-child(n + 5) { display: none; } .carta { display: flex; flex-direction: column; padding: var(--k-space-5); background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); } /* Con foto, la tarjeta se abre por arriba. La imagen va a sangre —de borde a borde— y no metida entre los márgenes: una foto con un marco de veinte píxeles alrededor parece un adorno, y ésta es información. El servicio sin foto conserva su tarjeta entera, con su padding. */ .carta.con-foto { padding: 0; overflow: hidden; } /* Todo lleva márgenes laterales MENOS la foto. Decía `:not(.carta-foto)`, y dejó de acertar el día que la foto pasó a ir envuelta en un botón para poder abrirse en grande: el hijo directo pasó a ser `.carta-lupa` y se llevaba los márgenes, así que la imagen quedaba pegada arriba pero con un borde blanco a los lados. Ése es el "está al ras y se ve feo" de la captura. */ .carta.con-foto > *:not(.carta-foto):not(.carta-lupa) { padding-left: var(--k-space-5); padding-right: var(--k-space-5); } .carta.con-foto h3 { margin-top: var(--k-space-4); } .carta.con-foto .enlace { padding-bottom: var(--k-space-5); } /* El hueco de la que no tiene foto, cuando sus vecinas sí. Del mismo alto que una foto —misma proporción 4:3— para que la fila entera quede pareja, y con la tijera de la marca en un fondo suave para que se lea como "aquí va una foto" y no como un error de carga. Al negocio le señala, sin decírselo, qué servicio le falta retratar. */ .cartas:has(.con-foto) .carta:not(.con-foto) { padding: 0; overflow: hidden; } .cartas:has(.con-foto) .carta:not(.con-foto) > * { padding-left: var(--k-space-5); padding-right: var(--k-space-5); } .cartas:has(.con-foto) .carta:not(.con-foto) > h3 { margin-top: var(--k-space-4); } .cartas:has(.con-foto) .carta:not(.con-foto) > .enlace { padding-bottom: var(--k-space-5); } .cartas:has(.con-foto) .carta:not(.con-foto)::before, .promos-publicas:has(.con-foto) .promo-publica:not(.con-foto)::before { content: ''; display: block; aspect-ratio: 4 / 3; /* La tijera PRIMERO: en `background`, la capa inicial se pinta encima. Con el degradado delante quedaba tapada y sólo se veía el color. */ background: /* La tijera, incrustada: son 250 bytes y evita una petición más por una decoración. Al ir en la hoja se cachea con ella, y `currentColor` no sirve dentro de un data URI, así que el trazo va escrito. */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E") center / 34px no-repeat, linear-gradient(135deg, color-mix(in srgb, var(--k-brand) 7%, var(--k-surface)), color-mix(in srgb, var(--k-accent) 9%, var(--k-surface))); opacity: .9; } .carta-foto { display: block; width: 100%; /* Apaisada 4:3: una foto de un corte se toma de frente, y un cuadrado le recorta el pelo por los lados, que es justo lo que se quiere enseñar. */ aspect-ratio: 4 / 3; object-fit: cover; } .carta .precio { margin: var(--k-space-2) 0 0; font-family: var(--k-font-sans); font-size: 1.5rem; } /* "Consúltanos" ocupa el lugar del precio, pero no grita como un precio. Mismo renglón y mismo hueco —si desapareciera, las tarjetas de una carta a medio configurar quedarían de alturas distintas— con el peso de un dato secundario, que es lo que es: una invitación a preguntar, no una cifra. */ .carta .precio-sin { font-weight: 500; opacity: .75; } .carta .rato { margin: 0; color: var(--k-text-muted); font: var(--k-small) var(--k-font-sans); } /* El enlace de acción de una tarjeta. Sin `.carta` delante a propósito: la tarjeta de una persona del equipo usa la misma clase y esta regla no la alcanzaba, así que "Reservar con Angie" salía con el azul subrayado que pone el navegador cuando NINGUNA regla llega. Ese azul no está en ningún token de este sistema, que es como se reconoce. */ .enlace { color: var(--k-brand-texto); font-weight: 600; text-decoration: none; } .enlace:hover { text-decoration: underline; } .carta .enlace { margin-top: auto; padding-top: var(--k-space-4); } /* Quién atiende. Con la inicial y no con una silueta gris: una foto que no existe se nota, y una inicial sobre el color del salón no finge nada. */ /* El equipo, en tarjetas. Eran píldoras con un círculo de cuarenta píxeles: una lista de etiquetas. Y elegir con quién sentarse es media razón por la que alguien vuelve a un salón, así que la cara tiene que verse — grande y de frente. El retrato va AL LADO del texto y no encima: en un salón lo que se mira de alguien es la cara, y una tarjeta vertical con la foto arriba obliga a hacer la foto pequeña para que la tarjeta no mida medio metro. Al lado cabe grande. */ .gente { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--k-space-4); } .persona { display: flex; align-items: stretch; gap: var(--k-space-4); padding: 0; overflow: hidden; background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); } .persona .inicial, .persona img { /* Un retrato es más alto que ancho: en 3:4 salen la cara y los hombros, que es como se mira a alguien. En cuadrado se corta el pelo, y en un salón el pelo es justo lo que se está enseñando. El alto lo manda la TARJETA y no la proporción: con `aspect-ratio` la foto medía 144px y la tarjeta, que sólo lleva un nombre y un enlace, medía menos — así que quedaba un dedo de fondo debajo del retrato. El mínimo de la tarjeta es lo que le da sitio a la cara. */ width: 108px; align-self: stretch; border-radius: 0; object-fit: cover; flex: none; } /* Para que la foto tenga altura que llenar: la tarjeta la marca el texto, y dos renglones no bastan para un retrato. */ .persona { min-height: 130px; } .persona .inicial { font-size: 2rem; } .persona-texto { display: flex; flex-direction: column; justify-content: center; gap: var(--k-space-1); padding: var(--k-space-4) var(--k-space-4) var(--k-space-4) 0; min-width: 0; } .persona-texto strong { font-size: 1.05rem; } /* El puesto, debajo del nombre. Más pequeño y en el color secundario a propósito: quien busca a Ana lee su nombre, y quien busca una colorista lee esta línea. Con los dos del mismo peso habría que leer la tarjeta entera para saber cuál es cuál. */ .persona-puesto { font-size: .875rem; color: var(--k-text-muted); /* Sin recorte: un puesto largo se parte en dos renglones antes que salir cortado a media palabra, que se lee como un error. */ line-height: 1.35; } /* El equipo como LISTA, cuando el negocio lo prefiere así. No es la tarjeta con la foto quitada: eso dejaría una rejilla de cajas medio vacías. Es otra forma — renglones a lo ancho, que es como se lee una lista de nombres — y por eso rompe la rejilla en vez de heredarla. Tiene sentido en un salón con mucha gente y pocos retratos, donde las caras serían iniciales grises, y en una barbería donde da igual quién te corte. */ .gente.equipo-lista { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); overflow: hidden; background: var(--k-surface); } .persona-renglon { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-4); flex-wrap: wrap; padding: var(--k-space-4); } /* La raya entre renglones y no alrededor de cada uno: una lista es una cosa con divisiones, no una pila de cajas sueltas. */ .persona-renglon + .persona-renglon { border-top: 1px solid var(--k-border); } .persona-renglon .persona-texto { padding: 0; } .direccion { margin: 0 0 var(--k-space-4); font-size: 1.05rem; } /* --- Los dos botones que flotan --------------------------------------------- */ /* WhatsApp abajo a la derecha y "volver arriba" encima. Escribir es la salida de quien no quiere reservar por la página —una duda, un precio, "¿tienen hueco hoy?"— y en un teléfono eso pasa a media pantalla, no al final. Volver arriba aparece sólo cuando hay algo de dónde volver. */ .flotantes { position: fixed; right: var(--k-space-4); bottom: var(--k-space-4); z-index: 20; display: grid; gap: var(--k-space-2); justify-items: center; } .flotante { width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: var(--k-radius-pill); box-shadow: var(--k-shadow-lg); cursor: pointer; transition: transform var(--k-fast), opacity var(--k-fast); } .flotante:hover { transform: translateY(-2px); } .flotante svg { width: 26px; height: 26px; } /* El verde es de WhatsApp, no del negocio: es el color por el que se reconoce ese icono en cualquier pantalla del mundo, y cambiarlo lo esconde. */ .flotante.whats { background: #25d366; color: #fff; } .flotante.arriba { background: var(--k-surface); color: var(--k-text); border: 1px solid var(--k-border); opacity: 0; pointer-events: none; } .flotante.arriba.se-ve { opacity: 1; pointer-events: auto; } /* --- El pie ----------------------------------------------------------------- */ /* El contacto: el mapa a un lado y las salidas al otro. El mapa ocupaba el ancho entero. Para contestar "¿me queda cerca?" sobra la mitad, y los tres botones debajo quedaban sueltos, a media pantalla de lo que explicaban. Lado a lado, mirar y tocar están a la misma altura. */ .contacto-cuerpo { display: grid; grid-template-columns: 1fr; gap: var(--k-space-5); align-items: start; } @media (min-width: 860px) { /* El mapa manda: es lo que se mira. Los botones sólo necesitan su ancho. */ .contacto-cuerpo { grid-template-columns: minmax(0, 1fr) 280px; } } .contacto-salidas { display: flex; flex-direction: column; gap: var(--k-space-3); } /* Apilados, cada uno ocupa su renglón entero: en una columna estrecha, tres botones de ancho automático quedan de tres tamaños distintos. */ .contacto-salidas .boton { width: 100%; } /* --- El cierre --------------------------------------------------------------- */ /* La última llamada, para quien leyó hasta abajo. La página se acababa con tres botones y una línea de pie. Quien llega al final habiéndolo leído todo es quien más cerca está de reservar, y se encontraba con que no había nada que tocar sin volver a subir. Oscuro y a todo el ancho a propósito: es el punto y final, y tiene que leerse distinto de las secciones que vienen antes. */ .cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--k-space-5); /* Del ancho de la columna, y con el MISMO relleno lateral que una sección. Llevaba un relleno propio más grande y su texto arrancaba ocho píxeles a la derecha de todos los títulos de la página. Es la clase de desajuste que no se sabe nombrar pero se ve. */ /* Una tarjeta ancha, como la franja: alinea por el borde y con el mismo margen calculado. */ margin: var(--k-space-16) var(--k-margen) var(--k-space-10); padding: clamp(var(--k-space-6), 4vw, var(--k-space-10)); border-radius: var(--k-radius-xl); /* El color del negocio, oscurecido. Un negro plano sería el mismo cierre en todos los salones; así el punto final también es suyo. */ background: linear-gradient(120deg, color-mix(in srgb, var(--k-brand) 88%, #000) 0%, color-mix(in srgb, var(--k-brand) 62%, #000) 100%); color: #f8f7f4; } .cierre-texto { display: flex; flex-direction: column; gap: var(--k-space-1); } .cierre-texto strong { font-family: var(--k-font-display); font-size: 1.5rem; line-height: 1.15; } /* El `.sub` del sistema es gris sobre claro; aquí el fondo es oscuro y ese gris desaparece. */ .cierre-texto .sub { margin: 0; color: rgba(248, 247, 244, .75); } .cierre .acciones { margin: 0; } /* Sobre el fondo oscuro, el botón claro es el que se ve: el primario del sistema es el color del negocio, que aquí ES el fondo. */ .cierre .boton { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; } /* Texto oscuro FIJO: el fondo de este botón es blanco fijo, así que su letra no puede seguir al tema. En oscuro `--k-text` es casi blanco, y el botón quedaba blanco con letra blanca — invisible salvo por su sombra. */ .cierre .boton.principal { background: #fff; color: #1a1a1a; } /* --- El pie ----------------------------------------------------------------- */ /* El pie, con columnas. Era una línea que decía "Hecho con Kabelo". Un pie así deja la página como cortada en seco, y desperdicia el único sitio donde se espera encontrar los enlaces, las redes y de quién es el negocio. */ /* El pie mide como una sección, no como el ancho de la ventana. Tenía el relleno en el `