/* ===== Kurae — web pública. Tema verde salvia, estilo cálido (Booksy/Treatwell) ===== */
:root {
  /* ── Color ──────────────────────────────────────────────────────────────
     Verde bosque profundo. El salvia anterior (#6B8E7F) era grisaceo: tenia
     3,62 de contraste sobre blanco, insuficiente para texto. Este llega a 5,25. */
  --salvia: #1F7A5C;
  --salvia-dark: #14563F;
  --salvia-50: #EEF7F3;
  --salvia-100: #D3EBE0;
  --salvia-200: #A8D7C2;
  /* Dorado: acompana al verde sin competir. Solo fondo o borde, nunca texto:
     con 2,42 de contraste no es legible sobre blanco. */
  --oro: #C9A227;
  --oro-50: #FBF6E4;
  /* El amarillo de las estrellas. NO es el oro de la marca: el oro es mostaza
     apagada y a 13px se lee marron, mientras que la estrella de una valoracion
     tiene que reconocerse al vuelo. Este es el ambar que usan Booksy, Fresha y
     Google, y es el mismo en la tarjeta, en el buscador y en la ficha: tres
     amarillos distintos para el mismo dato parecian tres cosas distintas. */
  --estrella: #E8A33D;

  /* Neutros con una pizca de verde, no grises puros: un gris neutro al lado de
     un verde saturado se ve sucio. */
  --tinta: #12211C;
  --tinta-2: #45524C;
  --gris: #6B7671;
  --gris-claro: #939D98;
  --borde: #E3E7E4;
  --borde-suave: #EFF2F0;
  --fondo: #FFFFFF;
  --fondo-hundido: #F7F9F8;

  /* ── Tipografia ─────────────────────────────────────────────────────────
     Jerarquia REAL de pesos. Antes casi todo estaba en 800: cuando todo grita,
     nada destaca, y es la senal mas clara de plantilla generada. */
  --peso-titular: 800;   /* solo el h1 de la portada */
  --peso-titulo: 700;    /* titulos de seccion y de ficha */
  --peso-dato: 600;      /* precios, notas, etiquetas */
  --peso-medio: 500;     /* enlaces de navegacion */
  --peso-texto: 400;     /* todo lo que se lee de corrido */

  /* Escala tipografica en cuarta mayor (1,25): cada paso se distingue del
     anterior sin saltos bruscos. */
  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.375rem;
  --t-xl: 1.75rem;
  --t-2xl: 2.25rem;

  /* ── Ritmo vertical ─────────────────────────────────────────────────────
     Entre secciones respira mas que dentro de una: es lo que separa una web
     cuidada de bloques apilados a la misma distancia. */
  --aire-xs: .35rem;
  --aire-sm: .75rem;
  --aire-md: 1.25rem;
  --aire-lg: 2rem;
  --aire-xl: 3.5rem;
  --aire-2xl: 5.5rem;

  /* ── Forma ──────────────────────────────────────────────────────────────
     Radios distintos segun el tamano del elemento: el mismo radio en una
     etiqueta y en una tarjeta hace que ambas parezcan la misma pieza. */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  /* Sombras que sugieren elevacion, no una caja dibujada */
  --sombra-sutil: 0 1px 2px rgba(18, 33, 28, .04);
  --sombra-carta: 0 1px 3px rgba(18, 33, 28, .05), 0 8px 24px -12px rgba(18, 33, 28, .14);
  --sombra-alta: 0 2px 6px rgba(18, 33, 28, .06), 0 16px 40px -16px rgba(18, 33, 28, .22);

  --transicion: 180ms cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--tinta); background: var(--fondo); line-height: 1.5; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.kr-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ===== Header ===== */
.kr-header { background: #fff; border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 100; }
/* Header full-width con poco margen lateral (como Tavlo): logo pegado a izq, botón a der */
.kr-header-inner { display: flex; align-items: center; gap: 2rem; height: 68px; max-width: 100%; margin: 0; padding: 0 2rem; }
.kr-logo { display: flex; align-items: center; }
/* 52px: el SVG trae mas margen interno que el PNG que sustituyo, asi que a
   la misma altura la marca se ve mas pequena de lo que mide. En movil baja,
   que al lado del boton de sesion en 390px iba justo. */
.kr-logo-img { height: 34px; width: auto; display: block; }
.kr-logo-text--white { color: #fff; }
.kr-nav { display: flex; gap: 1.5rem; margin-left: 1rem; }
.kr-nav-link { font-weight: 500; color: var(--tinta); }
.kr-nav-link:hover { color: var(--salvia); }
.kr-header-actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.kr-lang-btn { background: none; border: none; font-weight: 600; color: var(--gris); cursor: pointer; font-family: inherit; }
.kr-link-login { font-weight: 600; color: var(--tinta); }
.kr-btn-negocio { background: var(--salvia); color: #fff; padding: .6rem 1.1rem; border-radius: 10px; font-weight: 600; font-size: .9rem; }
.kr-btn-negocio:hover { background: var(--salvia-dark); }

/* ===== Hero =====
   Dos columnas: el texto manda a la izquierda y la fotografia entra por la
   derecha. Antes era un degradado verde a pantalla completa con todo centrado,
   que es la portada por defecto de cualquier marketplace y ademas pedia inventar
   color justo en un negocio que se vende con imagenes. */
/* Hero centrado y sin fotografia. Antes era a dos columnas con un mosaico de
   tres imagenes, pero justo debajo vienen las categorias, dos carruseles de
   negocios y las parroquias —todo con foto—: cuarenta imagenes seguidas y
   ningun punto donde descansar la vista.

   Ahora el hero solo abre la pagina: aire, promesa y buscador. Las fotos
   empiezan despues, y por eso se ven. */
.kr-hero {
  max-width: 760px; margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6.5rem) 1.5rem clamp(3rem, 5vw, 4.5rem);
  width: 100%; box-sizing: border-box;
  color: var(--tinta);
  text-align: center;
  position: relative;
}
/* Degradado muy tenue que da profundidad sin pintar un bloque de color: sube
   del blanco al verde de marca al 4%, asi que se nota sin competir con nada.
   Va en ::before y a todo el ancho de la ventana, no del contenedor. */
.kr-hero::before {
  content: '';
  position: absolute; inset: 0 calc(50% - 50vw);
  background: linear-gradient(170deg, var(--salvia-50) 0%, rgba(255,255,255,0) 62%);
  z-index: -1;
}
.kr-hero::after, .kr-hero-overlay { content: none; display: none; }

.kr-hero-txt { max-width: none; }

/* "Andorra" encima del titular: situa antes de leer la promesa, y de paso dice
   lo que ningun competidor puede decir. */
.kr-hero-sobre {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--salvia);
  margin-bottom: var(--aire-sm);
}
.kr-hero h1 {
  /* Estuvo en 3.6rem (58px en escritorio) y era mas grande que el titular de
     cualquier marketplace del ramo. Un hero de portada no compite por ser lo
     mas grande de la pantalla: compite por llevar al buscador, que esta justo
     debajo. A 2.9rem sigue mandando y deja de aplastar lo que viene. */
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: var(--peso-titular);
  line-height: 1.06; letter-spacing: -.035em;
  color: var(--tinta);
  /* 20ch y centrado: dos renglones anchos leen mejor que tres estrechos. */
  max-width: 20ch; margin-inline: auto;
  text-wrap: balance;
}
.kr-hero-sub {
  margin: var(--aire-md) auto 0; color: var(--tinta-2);
  font-size: var(--t-md); line-height: 1.55; max-width: 34rem;
}


/* ===== Buscador de la portada: QUE y DONDE =====
   Una sola caja de texto obliga a adivinar que se escribe dentro. Con los dos
   campos a la vista, el buscador ensena por si solo como se busca, y la
   parroquia se elige de una lista en vez de escribirse bien —«Sant Julia de
   Loria» con acentos y todo—. */
.kr-buscador {
  display: flex; align-items: stretch;
  margin: var(--aire-lg) auto 0;
  max-width: 40rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 999px;
  box-shadow: var(--sombra-carta);
  padding: .35rem .35rem .35rem 1.15rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.kr-buscador:focus-within { border-color: var(--salvia-200); box-shadow: var(--sombra-alta); }
.kr-buscador-campo {
  display: flex; align-items: center; gap: .6rem;
  flex: 1 1 0; min-width: 0;
}
.kr-buscador-campo i { width: 18px; height: 18px; color: var(--gris); flex: 0 0 auto; }
.kr-buscador-campo input,
.kr-buscador-campo select {
  width: 100%; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: var(--t-base); color: var(--tinta);
  padding: .7rem 0;
}
.kr-buscador-campo select { cursor: pointer; appearance: none; }
.kr-buscador-campo input::placeholder { color: var(--gris); }
/* El «donde» pesa menos que el «que»: casi todo el mundo llega con el servicio
   en la cabeza y la parroquia como matiz. */
.kr-buscador-campo--donde { flex: 0 1 12rem; }
.kr-buscador-sep { width: 1px; background: var(--borde); margin: .55rem .9rem; flex: 0 0 auto; }
.kr-buscador button[type="submit"] {
  flex: 0 0 auto;
  border: 0; cursor: pointer;
  background: var(--salvia-dark); color: #fff;
  font: inherit; font-weight: var(--peso-dato); font-size: var(--t-sm);
  padding: .7rem 1.5rem; border-radius: 999px;
  transition: background var(--transicion);
}
.kr-buscador button[type="submit"]:hover { background: var(--salvia); }

@media (max-width: 640px) {
  /* En columna: los dos campos y el boton no caben en 390 px sin dejar el
     «donde» en tres caracteres. */
  .kr-buscador {
    flex-direction: column; align-items: stretch;
    border-radius: var(--radius); padding: .4rem;
    gap: .15rem;
  }
  .kr-buscador-campo { padding-inline: .8rem; }
  .kr-buscador-sep { width: auto; height: 1px; margin: 0 .8rem; }
  .kr-buscador button[type="submit"] { width: 100%; border-radius: calc(var(--radius) - 4px); padding: .85rem; }
}

.kr-hero-puntos {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 1.5rem; margin-top: var(--aire-md);
}
.kr-hero-puntos li {
  display: flex; align-items: center; gap: .35rem;
  font-size: var(--t-sm); color: var(--tinta-2); font-weight: var(--peso-medio);
}
.kr-hero-puntos i { width: 15px; height: 15px; color: var(--salvia); stroke-width: 3; }

/* El mosaico de fotos se retiro del hero (ver el comentario de .kr-hero), asi
   que `.kr-hero-fotos` y `.kr-hero-foto` ya no existen en la plantilla. */

@media (max-width: 560px) {
  .kr-hero h1 { max-width: none; }
}

@media (max-width: 560px) {
      }

/* ===== Secciones ===== */
/* RITMO UNIFORME, y el titulo pegado a lo suyo.

   Antes cada seccion abria con 3.5rem y la siguiente anadia 2rem mas, o sea
   5.5rem entre una y otra, con el titulo a 1.25rem de su propia fila. El
   resultado: el titulo quedaba casi tan lejos de sus tarjetas como de la
   seccion anterior, y la pagina se leia como bloques sueltos.
   Ahora el hueco entre secciones (4rem) es el doble que el que separa un
   titulo de su contenido, que es lo que agrupa las cosas sin dibujar cajas. */
.kr-section { padding: var(--aire-lg) 0; }
/* EL TITULO DE SECCION NO ES UN TITULAR.
   Estaba a 28px y en negrita, el mismo peso que el h1 del hero a media
   pantalla de distancia: cuatro seguidos y la portada parecia un indice. En un
   marketplace el titulo solo etiqueta la fila —lo que tiene que mirarse son
   las tarjetas—, asi que baja a 20px. */
.kr-section h2 {
  font-size: 1.25rem;
  font-weight: var(--peso-titulo);
  color: var(--tinta);
  letter-spacing: -.015em;
  margin-bottom: var(--aire-md);
}
.kr-vacio { color: var(--gris); }

/* ===== Azulejos de categoria y parroquia =====
   Fotografia a sangre con el nombre encima, no un icono de linea dentro de un
   cuadro. Las fotos de cada oficio ya estaban en el repositorio sin usarse
   mientras la portada de un negocio visual se anunciaba con pictogramas.

   Formato vertical (3/4): la foto de un oficio se reconoce mejor alta que
   apaisada, y la columna deja sitio a mas azulejos en la misma fila. */
/* ===== Azulejos de categoria =====
   EL NOMBRE, DEBAJO DE LA FOTO Y EN NEGRO.

   Estaban montados como fotografia a sangre de 3/4 con el nombre en blanco
   encima y un velo oscuro para que se leyera. Dos problemas. El velo tapaba la
   mitad inferior de cada foto —justo donde suele estar lo que se reconoce del
   oficio—, y el resultado eran seis rectangulos oscuros en fila que pesaban
   mas que las tarjetas de negocio que vienen justo debajo, cuando lo
   importante de la portada son los negocios, no las categorias.

   Ahora es lo mismo que una tarjeta de negocio: foto limpia arriba, texto en
   negro debajo. La fila entera deja de ser un bloque oscuro y las dos filas
   siguientes se leen como una sola familia. */
.kr-azulejo {
  flex: 0 0 auto;
  display: block;
  background: none;
  /* Pegado arriba: el carrusel es una rejilla y sin esto cada azulejo se
     estiraba a la altura de la fila, separando el nombre de su foto. */
  align-self: start;
}
.kr-azulejo-foto {
  /* `display: block` a mano: es un <span>, y en linea se ignora la proporcion
     y el nombre de debajo se quedaba fuera de la caja del carrusel. */
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--fondo-hundido);
  isolation: isolate;
}
.kr-azulejo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.kr-azulejo:hover img { transform: scale(1.04); }
.kr-azulejo:focus-visible { outline: 2px solid var(--salvia); outline-offset: 3px; }

/* Cuadrada y no 3/4: en vertical, seis fotos seguidas hacian una franja tan
   alta como el hero. El cuadrado deja ver el oficio igual y ocupa un tercio
   menos de pantalla. */
.kr-azulejo-txt {
  display: block;
  margin-top: .55rem;
  color: var(--tinta);
}
.kr-azulejo-txt strong {
  font-size: .9375rem; font-weight: var(--peso-dato);
  line-height: 1.3; letter-spacing: -.01em;
}

/* Sin fotografia: fondo verde con el icono grande y tenue. Es un hueco
   declarado, no una imagen rota. */
.kr-azulejo-sinfoto {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--salvia) 0%, var(--salvia-dark) 100%);
  color: rgba(255,255,255,.55);
}
.kr-azulejo-sinfoto i { width: 34px; height: 34px; }

/* Parroquias: mismo azulejo, apaisado y en rejilla. Son siete y caben en dos
   filas, asi que un carrusel aqui solo esconderia la mitad. */
.kr-azulejos-parroquia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.kr-azulejo--bajo { aspect-ratio: 16/10; }
@media (max-width: 640px) {
  .kr-azulejos-parroquia { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
}

/* ===== Carrusel de negocios ===== */
.kr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
@media (prefers-reduced-motion: reduce) {
  .kr-card, .kr-card-img img { transition: none; }
  .kr-card:hover { transform: none; }
  .kr-card:hover .kr-card-img img { transform: none; }
}

/* La foto manda: la tarjeta no se dibuja. Antes cada negocio era un recuadro
   con borde y sombra que dentro llevaba tres capsulas de colores (abierto,
   sector, nota) y cuatro filas de texto; con todo pidiendo atencion, no la
   conseguia nada y el conjunto parecia una plantilla. Ahora solo la nota se
   dibuja, encima de la foto, y lo demas es jerarquia de texto sobre el blanco
   de la pagina. */
.kr-card {
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex; flex-direction: column;
  transition: transform var(--transicion);
}
.kr-card:hover { transform: translateY(-3px); }
.kr-card:focus-visible {
  outline: 2px solid var(--salvia); outline-offset: 4px; border-radius: var(--radius);
}

/* 4/3. Se probo 4/5 (mas alta, como Booksy) y en escritorio una fila de cuatro
   tarjetas se comia la pantalla entera: para ver la siguiente seccion habia que
   bajar dos veces. Booksy puede permitirselo porque su fila es un carrusel de
   una sola seccion; aqui hay dos filas seguidas. */
.kr-card-img {
  aspect-ratio: 4/3; background: var(--salvia-50);
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--sombra-sutil);
}
.kr-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.kr-card:hover .kr-card-img img { transform: scale(1.05); }

/* La nota y su numero de resenas van juntos en una sola pieza, como en Booksy:
   son el mismo dato y separarlos obligaba a buscar el segundo abajo del todo.

   Va en capsula oscura y no en texto blanco con sombra: las fotos las suben los
   negocios y muchas son claras (una manicura sobre fondo blanco, un gimnasio
   sobreexpuesto). Con sombra de texto la cifra desaparecia justo en esas. */
/* ── Corazon de favoritos ───────────────────────────────────────────────────
   Vacio es un trazo, lleno es rojo macizo. Sin relleno a medias ni tonos
   intermedios: guardado o no guardado, y se tiene que ver de un vistazo desde
   una cuadricula de doce tarjetas.

   El rojo es el unico de la paleta publica; en Kurae no lo usa nada mas, asi
   que no se confunde con un error ni con una alerta. */
.kr-fav {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; cursor: pointer;
  background: transparent; color: #fff;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, color .15s ease;
}
.kr-fav svg { width: 22px; height: 22px; display: block; }
.kr-fav:hover { transform: scale(1.12); }
.kr-fav:active { transform: scale(.94); }
.kr-fav:focus-visible { outline: 2px solid var(--salvia); outline-offset: 3px; border-radius: 50%; }

/* Guardado: relleno y borde del mismo rojo, que es lo que lo hace macizo. */
.kr-fav.activo { color: #E0245E; }
.kr-fav.activo svg { fill: #E0245E; }

/* Mientras el servidor contesta. Muy leve a proposito: el corazon ya se ha
   pintado como va a quedar, esto solo dice «voy». */
.kr-fav-late { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .kr-fav, .kr-fav:hover, .kr-fav:active { transition: none; transform: none; }
}

/* Sobre la foto, arriba a la DERECHA, como en Fresha y Booksy. Estuvo a la
   izquierda mientras la nota ocupaba la otra esquina; ahora que la nota vive
   en la linea del titulo, esta es la esquina donde la gente ya lo busca.
   Lleva sombra porque una foto clara se come un icono blanco. */
.kr-fav-card {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.kr-fav-card:not(.activo) svg { fill: rgba(0, 0, 0, .18); }

/* En la ficha vive DENTRO de la pastilla de «Guardar», al otro extremo del
   nombre. Estuvo pegado al titulo, suelto y sin texto, donde un icono a secas
   no dice que hace; con su palabra al lado y en la esquina de las acciones se
   entiende sin explicarlo. El hover lo enciende la pastilla entera, no el
   corazon: lo que se pulsa es todo el boton. */
.kr-fav-ficha { color: var(--gris); }
.kr-fav-ficha svg { width: 18px; height: 18px; }
.kr-ficha-acciones:hover .kr-fav-ficha,
.kr-fav-ficha.activo { color: #E0245E; }


/* Nombre a la izquierda, nota pegada al borde derecho. `space-between` y no un
   `gap`: asi la nota cae en la misma vertical en todas las tarjetas y bajando
   una rejilla de doce se comparan de un vistazo. Sin `wrap`: si el nombre es
   largo se recorta el nombre, la nota no baja de linea. */
.kr-card-titulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; flex-wrap: nowrap;
}
.kr-card-titulo h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kr-card-nota {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: var(--t-sm); font-weight: var(--peso-dato);
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
/* Amarillo, como en todo el sector. Es el unico sitio de la tarjeta con color
   que no sea la foto, y por eso el ojo lo encuentra sin buscarlo. */
.kr-card-nota-est { color: var(--estrella); font-size: .95em; }

/* «Abierto» va en la linea de la ciudad, en verde y sin pastilla. Estuvo junto
   al nombre, pero ahi ahora esta la nota. Se probo tambien como etiqueta oscura
   sobre la foto y competia con la nota por la misma zona ademas de tapar la
   fotografia. */
.kr-card-estado {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .72rem; font-weight: var(--peso-dato);
  color: var(--salvia); white-space: nowrap; flex-shrink: 0;
}
.kr-card-estado::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
/* Cerrado en gris: es un dato, no una alarma. En rojo parecia que el negocio
   tuviera un problema. */
.kr-card-cerrado { color: var(--gris-claro); }

.kr-card-body {
  padding: .8rem .15rem 0;
  display: flex; flex-direction: column; gap: .18rem;
}
.kr-card-body h3 {
  font-size: var(--t-base); font-weight: var(--peso-titulo);
  color: var(--tinta); letter-spacing: -.01em; line-height: 1.3;
  /* Un nombre largo parte la rejilla y descuadra los precios de la fila. El
     min-width:0 es lo que permite que se recorte dentro del flex del titulo:
     sin el, el nombre empuja al estado fuera de la tarjeta. */
  min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Sector, parroquia y precio en una linea gris. Tres datos cortos se leen de
   corrido mejor que en tres filas con una capsula cada uno. */
/* Sector y parroquia en una linea gris; el precio en la SIGUIENTE y en negro.
   Todo seguido en un renglon ("Tatuaje y piercing - Andorra la Vella - desde
   60EUR") se cortaba justo por el precio, que es medio motivo de mirar la
   tarjeta, y ademas lo dejaba con el mismo peso que la parroquia. */
.kr-card-meta {
  color: var(--gris); font-size: var(--t-sm); font-weight: var(--peso-texto);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== CTA negocios ===== */
/* ===== Aviso para saloness =====
   SIN CAJA DE COLOR. Era un recuadro verde menta de 3rem justo debajo de otro
   recuadro, asi que la portada acababa con dos cajas seguidas y ninguna de las
   dos hablaba de un negocio. Sin fondo y con una linea fina arriba deja de
   pedir turno y hace lo suyo: cerrar la pagina. */
.kr-cta {
  background: none; padding: var(--aire-xl) 0 0; text-align: center;
  border-top: 1px solid var(--borde);
}
.kr-cta h2 { color: var(--tinta); }
.kr-cta p { color: var(--gris); margin: .6rem 0 1.5rem; }
.kr-cta a {
  background: var(--salvia-dark); color: #fff;
  padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: var(--peso-dato); font-size: var(--t-sm); display: inline-block;
  transition: background var(--transicion);
}
.kr-cta a:hover { background: var(--salvia); }

/* ===== Listado ===== */
.kr-listado { padding: 2rem 1.5rem; }
.kr-listado-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; }
.kr-breadcrumb { font-size: .82rem; color: var(--gris); margin-bottom: .4rem; }
.kr-breadcrumb a:hover { color: var(--salvia); }
/* 28 px chocaba con los 20 de los titulos de seccion de la portada. Y en
   movil «Negocios de belleza y bienestar en Andorra» ocupaba tres renglones,
   que es media pantalla antes del primer negocio. */
.kr-listado-head h1 {
  font-size: clamp(1.375rem, 2.2vw, 1.5rem); font-weight: var(--peso-titulo);
  color: var(--tinta); letter-spacing: -.02em;
}
.kr-listado-count { color: var(--gris); font-size: .9rem; margin-top: .25rem; }
.kr-listado-toggle { display: flex; gap: .25rem; background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: .25rem; }
.kr-toggle-btn { display: flex; align-items: center; gap: .4rem; border: none; background: none; padding: .5rem .9rem; border-radius: 8px; font-family: inherit; font-weight: 600; font-size: .85rem; color: var(--gris); cursor: pointer; }
.kr-toggle-btn i { width: 16px; height: 16px; }
.kr-toggle-btn.active { background: var(--salvia); color: #fff; }
.kr-listado-body { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
/* Se desliza con la pagina, como el sidebar de Tavlo (`position: static`).
   Estuvo fijo con scroll propio: resolvia lo de «Limpiar filtros», pero dejaba
   dos zonas desplazandose por separado y al bajar por la lista se movia la de
   debajo del raton en vez de la que se estaba mirando. Yendo con la pagina, el
   enlace del final se alcanza igual y no hay dos scrolls compitiendo. */
.kr-filtros { position: static; }
/* Mas apretado: con 13 categorias y 7 parroquias, .3rem por casilla y 1.25rem
   entre grupos hacian un sidebar de dos pantallas. En Tavlo cabe todo de una. */
/* Sin rayas entre secciones, solo aire: es lo que hace Tavlo en el sidebar de
   ESCRITORIO —`border: none !important; padding-bottom: 20px`—. Las rayas de
   su `.filter-section` son las del modal de filtros del movil, otra pieza. */
.kr-filtro-group { margin-bottom: 0; padding-bottom: 20px; }
.kr-filtro-group h4 { font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--tinta); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
/* 14px y gris medio, como `.filter-popup-item` de Tavlo: la opcion pesa
   menos que el titulo de su seccion, que es lo que ordena la lectura. */
.kr-filtro-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; cursor: pointer; color: #374151; }
.kr-filtro-check input { accent-color: var(--salvia); width: 18px; height: 18px; flex-shrink: 0; }
.kr-filtro-check:hover { color: var(--tinta); }
.kr-range { width: 100%; accent-color: var(--salvia); margin-top: .4rem; cursor: pointer; }
/* El titulo en tinta, no en verde: con el icono ya verde, todo en color hace
   que la seccion pese mas que las opciones que contiene. */
.kr-filtro-group h4 > span { color: var(--tinta); font-weight: 600; }
.kr-filtro-clear { color: var(--salvia); font-size: .85rem; font-weight: 600; cursor: pointer; }
/* Contador a la izquierda y «Ordenar» a la derecha, en la misma fila: los dos
   hablan de los resultados. */
.kr-orden { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.kr-orden .kr-listado-count { margin: 0; font-size: 14px; color: var(--tinta-2); }
.kr-orden select { padding: .5rem .9rem; border: 1px solid var(--borde); border-radius: 10px; font-family: inherit; font-size: .85rem; background: #fff; cursor: pointer; }
/* La rejilla de tres columnas del listado se retiró: ahora la tarjeta es
   horizontal a una columna (ver «TARJETA HORIZONTAL» al final del fichero).
   Se deja anotado para que nadie la reponga pensando que falta. */
.kr-mapa-placeholder { background: var(--salvia-50); border-radius: var(--radius); min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--salvia); }
.kr-mapa-placeholder i { width: 48px; height: 48px; }
/* ══ FILTROS EN MOVIL: UNA HOJA, NO UN MURO ════════════════════════════════
   Iban desplegados encima de la lista y median 908 px —casi dos pantallas— asi
   que el primer negocio aparecia a 1.580 px del principio. Quien entra a mirar
   salones tenia que pasar antes por veinte casillas y dos deslizadores.

   Mismo marcado, distinta colocacion: la columna se convierte en una hoja que
   sube desde abajo. Asi no hay dos juegos de filtros que mantener a la vez. */
.kr-filtros-abrir { display: none; }
.kr-filtros-cab { display: none; }

@media (max-width: 860px) {
  .kr-listado-body { grid-template-columns: 1fr; }

  .kr-filtros-abrir {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem;
    border: 1px solid rgba(18, 33, 28, .14); border-radius: 999px;
    background: var(--fondo); color: var(--tinta);
    font: inherit; font-size: var(--t-sm); font-weight: var(--peso-dato);
    cursor: pointer;
  }
  .kr-filtros-abrir i, .kr-filtros-abrir svg { width: 16px; height: 16px; }
  /* El contador dentro del boton no lleva `margin-left:auto` como en los
     titulos de la columna: ahi empuja el numero al borde del boton. */
  .kr-filtros-abrir .kr-filtro-n { margin-left: 0; }

  .kr-filtros {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 320;
    max-height: 82vh; overflow-y: auto;
    background: var(--fondo);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 40px rgba(18, 33, 28, .22);
    padding: 0 1.25rem 1.5rem;
    transform: translateY(101%);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
  }
  .kr-filtros.is-open { transform: none; }

  /* Cabecera pegada arriba: con la hoja a media pantalla de alto, el boton de
     cerrar se iba de la vista en cuanto se bajaba por las categorias. */
  .kr-filtros-cab {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1;
    margin: 0 -1.25rem; padding: 1rem 1.25rem;
    background: var(--fondo); border-bottom: 1px solid var(--borde);
  }
  .kr-filtros-cab strong { font-size: var(--t-md); font-weight: var(--peso-titulo); }
  .kr-filtros-cab button {
    border: 0; background: none; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: var(--gris); padding: 0 .25rem;
  }

  .kr-filtros-velo {
    position: fixed; inset: 0; z-index: 310;
    background: rgba(18, 33, 28, .45);
  }
  .kr-filtros-velo[hidden] { display: none; }

  /* El orden y el boton comparten renglon y el contador se va a la derecha. */
  .kr-orden { gap: .6rem; flex-wrap: wrap; }
  .kr-orden .kr-listado-count { order: 3; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .kr-filtros { transition: none; }
}

/* ===== Detalle de negocio ===== */
.kr-detalle { padding: 1.5rem; }
.kr-detalle .kr-breadcrumb { margin-bottom: 1rem; }
.kr-detalle-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }
.kr-detalle-main { min-width: 0; }

/* Galería */
/* La regla anterior ocultaba la TERCERA miniatura, pero el contador "+N" cuenta
   desde la cuarta: con 3 fotos solo se veian 2 y la que faltaba no aparecia por
   ningun lado. El layout ya deja sitio para las dos que caben. */
.kr-galeria {
  display: grid; grid-template-columns: 1.9fr 1fr; gap: .6rem;
  border-radius: var(--radius); overflow: hidden; height: 420px;
  position: relative;
}
.kr-galeria-big { overflow: hidden; }
.kr-galeria-big img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.kr-galeria-big:hover img { transform: scale(1.03); }

.kr-galeria-thumbs { display: grid; grid-template-rows: 1fr 1fr; gap: .6rem; min-height: 0; }
.kr-galeria-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 720px) {
  .kr-galeria { grid-template-columns: 1fr; height: auto; }
  .kr-galeria-big img { height: 260px; }
  .kr-galeria-thumbs { grid-template-rows: none; grid-auto-flow: column; height: 100px; }
}

/* Info */
.kr-detalle-info { padding: 1.5rem 0; border-bottom: 1px solid var(--borde); }
.kr-detalle-titulo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kr-detalle-titulo h1 {
  font-size: var(--t-2xl); font-weight: var(--peso-titulo);
  color: var(--tinta); letter-spacing: -.025em; line-height: 1.1;
}
.kr-detalle-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .75rem; color: var(--gris); font-size: .9rem; }
.kr-detalle-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.kr-detalle-meta i { width: 16px; height: 16px; color: var(--salvia); }
.kr-detalle-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .9rem; }
.kr-detalle-desc { margin-top: 1rem; color: #4b5563; line-height: 1.65; }

/* Secciones */
.kr-detalle-section { padding: 2rem 0; border-bottom: 1px solid var(--borde); }
.kr-detalle-section h2 {
  font-size: var(--t-lg); font-weight: var(--peso-titulo);
  color: var(--tinta); letter-spacing: -.015em; margin-bottom: var(--aire-md);
}

/* Servicios */
.kr-serv-grupo { font-size: 1rem; font-weight: 700; color: var(--tinta); margin: 1.25rem 0 .5rem; }
.kr-serv-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid #f0ede8; }
.kr-serv-nombre { font-weight: 600; display: block; }
.kr-serv-dur { font-size: .82rem; color: var(--gris); }
.kr-serv-accion { display: flex; align-items: center; gap: 1rem; }
.kr-serv-precio { font-weight: 700; color: var(--salvia-dark); }
.kr-btn-reservar-sm { background: #fff; color: var(--salvia-dark); border: 1.5px solid var(--salvia); padding: .5rem 1.1rem; border-radius: 10px; font-weight: 600; font-size: .85rem; transition: .15s; }
.kr-btn-reservar-sm:hover { background: var(--salvia); color: #fff; }

/* Equipo */
.kr-equipo { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.kr-equipo-card { text-align: center; width: 90px; }
.kr-equipo-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto .5rem; border: 3px solid var(--salvia-100); }
.kr-equipo-nombre { display: block; font-weight: 600; font-size: .85rem; }
.kr-equipo-rol { display: block; font-size: .72rem; color: var(--gris); }

/* Reseñas */
.kr-resenas-top { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
/* La columna de la nota NO lleva `align-self`: con uno propio el hijo ignora
   el `align-items: center` del grid, se estira a los 142px del desglose de al
   lado y el circulo queda pegado arriba. Que la centre el padre. */
.kr-resenas-score { text-align: center; }
/* La nota grande SI merece peso: es el dato que se busca en esa seccion */
.kr-resenas-de { margin-top: .3rem; font-size: .82rem; color: var(--gris); }
.kr-desglose-row { display: grid; grid-template-columns: 90px 1fr 32px; gap: .75rem; align-items: center; margin-bottom: .5rem; font-size: .85rem; }
.kr-desglose-bar { background: #eee; border-radius: 999px; height: 7px; overflow: hidden; }
.kr-desglose-bar div { background: var(--salvia); height: 100%; border-radius: 999px; }
.kr-desglose-num { font-weight: 700; color: var(--salvia-dark); text-align: right; }
.kr-resena { border-bottom: 1px solid var(--borde); padding: 1rem 0; }
.kr-resena-texto { color: #4b5563; font-size: .9rem; }

/* Horario + mapa */
.kr-detalle-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.kr-horario-row { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid #f0ede8; font-size: .9rem; }
.kr-horario-row .cerrado { color: var(--gris); }
.kr-mapa-mini { min-height: 200px; }

/* Panel reserva sticky */
.kr-reserva-panel { position: sticky; top: 90px; }
.kr-reserva-card { background: #fff; border: 1px solid var(--borde); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 4px 20px rgba(107,142,127,.08); }
.kr-reserva-card h3 { font-size: var(--t-md); font-weight: var(--peso-titulo); color: var(--tinta); }
.kr-reserva-sub { color: var(--gris); font-size: .85rem; margin: .4rem 0 1.25rem; }
.kr-btn-reservar { display: block; text-align: center; background: var(--salvia); color: #fff; padding: .9rem; border-radius: 12px; font-weight: 700; transition: .15s; }
.kr-btn-reservar:hover { background: var(--salvia-dark); }
.kr-reserva-info { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .6rem; font-size: .88rem; color: #4b5563; }
.kr-reserva-info i { width: 16px; height: 16px; color: var(--salvia); vertical-align: middle; margin-right: .4rem; }

/* Barra reserva móvil */
.kr-reserva-movil { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--borde); padding: .75rem 1.5rem; align-items: center; justify-content: space-between; z-index: 50; }
.kr-reserva-movil span { font-weight: 700; color: var(--salvia-dark); }
.kr-reserva-movil .kr-btn-reservar { padding: .7rem 1.75rem; }

@media (max-width: 900px) {
  .kr-detalle-grid { grid-template-columns: 1fr; }
  .kr-reserva-panel { display: none; }
  .kr-reserva-movil { display: flex; }
  .kr-detalle-2col { grid-template-columns: 1fr; }
}

/* ===== Wizard de reserva ===== */
.kr-wizard-page { background: var(--salvia-50); min-height: calc(100vh - 68px); padding: 2rem 1.5rem; }
.kr-wizard { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--borde); border-radius: 20px; padding: 1.75rem; box-shadow: 0 8px 30px rgba(107,142,127,.08); }
.kr-wizard-head { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--borde); }
.kr-wizard-volver { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--borde); display: grid; place-items: center; color: var(--tinta); }
.kr-wizard-volver:hover { background: var(--salvia-50); }
.kr-wizard-volver i { width: 18px; height: 18px; }
.kr-wizard-head h2 { font-size: var(--t-md); font-weight: var(--peso-titulo); color: var(--tinta); }
.kr-wizard-head p { font-size: .82rem; color: var(--gris); }

.kr-wizard-steps { display: flex; gap: .5rem; margin: 1.25rem 0; flex-wrap: wrap; }
.kr-step { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--gris); cursor: default; }
.kr-step span { width: 22px; height: 22px; border-radius: 50%; background: #eee; color: var(--gris); display: grid; place-items: center; font-size: .75rem; }
.kr-step.active { color: var(--salvia-dark); }
.kr-step.active span { background: var(--salvia); color: #fff; }
.kr-step.done { color: var(--salvia); cursor: pointer; }
.kr-step.done span { background: var(--salvia-100); color: var(--salvia-dark); }

.kr-wizard-resumen { display: flex; flex-wrap: wrap; gap: 1rem; background: var(--salvia-50); border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .82rem; color: var(--salvia-dark); }
.kr-wizard-resumen span { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.kr-wizard-resumen i { width: 14px; height: 14px; }

.kr-wizard-titulo { font-size: var(--t-md); font-weight: var(--peso-titulo); color: var(--tinta); margin-bottom: var(--aire-md); }
.kr-wizard-opcion { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 1rem; margin-bottom: .6rem; cursor: pointer; transition: .15s; text-align: left; font-family: inherit; }
.kr-wizard-opcion:hover { border-color: var(--salvia); background: var(--salvia-50); }
.kr-wizard-opcion-nombre { display: block; font-weight: 600; color: var(--tinta); }
.kr-wizard-opcion-sub { display: block; font-size: .8rem; color: var(--gris); }
.kr-wizard-opcion-precio { font-weight: 700; color: var(--salvia-dark); }
.kr-wizard-prof { display: flex; align-items: center; gap: .8rem; }
.kr-wizard-prof-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.kr-wizard-prof-any { width: 44px; height: 44px; border-radius: 50%; background: var(--salvia-100); display: grid; place-items: center; color: var(--salvia-dark); }
.kr-wizard-prof-any i { width: 20px; height: 20px; }

.kr-wizard-dias {
  display: flex; gap: .5rem; overflow-x: auto;
  padding-bottom: .5rem; margin-bottom: var(--aire-md);
  /* Misma decision que en las otras tiras: la barra afea y se desliza igual */
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.kr-wizard-dias::-webkit-scrollbar { display: none; }
.kr-wizard-dias > * { scroll-snap-align: start; }
.kr-wizard-dia { flex: 0 0 auto; width: 56px; padding: .6rem 0; border: 1px solid var(--borde); border-radius: 12px; background: #fff; cursor: pointer; text-align: center; font-family: inherit; }
.kr-wizard-dia:hover:not(.disabled) { border-color: var(--salvia); }
.kr-wizard-dia.sel { background: var(--salvia); border-color: var(--salvia); color: #fff; }
.kr-wizard-dia.disabled { opacity: .35; cursor: not-allowed; }
.kr-dia-sem { display: block; font-size: .7rem; color: inherit; opacity: .7; }
.kr-dia-num { display: block; font-size: 1.1rem; font-weight: 700; }
.kr-horas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); gap: .5rem; }
.kr-wizard-hora { padding: .6rem; border: 1px solid var(--borde); border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit; font-weight: 600; font-size: .85rem; transition: .15s; }
.kr-wizard-hora:hover { background: var(--salvia); color: #fff; border-color: var(--salvia); }
.kr-wizard-hint { color: var(--gris); font-size: .85rem; }

.kr-wizard-form { display: flex; flex-direction: column; gap: .9rem; }
.kr-wizard-form label { font-size: .85rem; font-weight: 600; color: var(--tinta); display: flex; flex-direction: column; gap: .35rem; }
.kr-wizard-form input, .kr-wizard-form textarea, .kr-wizard-form select { padding: .7rem .9rem; border: 1px solid var(--borde); border-radius: 10px; font-family: inherit; font-size: .9rem; }
/* El pais y el numero, en la misma linea: son un solo dato. El desplegable
   ocupa lo justo y el numero se queda con el resto del ancho. */
.kr-tel-fila { display: flex; gap: .4rem; }
.kr-tel-fila select { flex: 0 0 auto; width: 6.2rem; background: #fff; }
.kr-tel-fila input { flex: 1 1 auto; min-width: 0; }
.kr-wizard-form input:focus, .kr-wizard-form textarea:focus { outline: none; border-color: var(--salvia); }
.kr-wizard-form .kr-btn-reservar { margin-top: .5rem; }

.kr-wizard-ok { text-align: center; padding: 1.5rem 0; }
.kr-wizard-ok-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--salvia); display: grid; place-items: center; margin: 0 auto 1rem; }
.kr-wizard-ok-icon i { width: 32px; height: 32px; color: #fff; }
.kr-wizard-ok h3 { font-size: var(--t-lg); font-weight: var(--peso-titulo); color: var(--tinta); }
.kr-wizard-ok p { color: var(--gris); margin: .4rem 0 1.25rem; }
.kr-wizard-ok-detalle { background: var(--salvia-50); border-radius: 12px; padding: 1rem; text-align: left; margin-bottom: 1.25rem; }
.kr-wizard-ok-detalle div { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .9rem; }
.kr-wizard-ok-detalle span { color: var(--gris); }

/* ===== Footer ===== */
/* ── Pie ─────────────────────────────────────────────────────────────────────
   Misma estructura que el de Tavlo —marca a la izquierda, tres columnas,
   una fila de redes y tiendas, y la barra legal abajo— con el verde de Kurae
   en vez del azul marino. */
.kr-pie {
  background: var(--tinta); color: rgba(237, 242, 239, .88);
  margin-top: 4rem; padding: 3rem 0 0;
}
.kr-pie-rejilla {
  display: grid; grid-template-columns: minmax(150px, 1fr) 3fr;
  gap: 2.5rem; align-items: start; padding-bottom: 2rem;
}
.kr-pie-marca { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.kr-pie-logo { width: 104px; height: auto; display: block; opacity: .95; }
.kr-pie-lema { margin: 0; font-size: .82rem; line-height: 1.45; color: rgba(237, 242, 239, .55); max-width: 240px; }

.kr-pie-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
/* Mayusculas pequenas: separan la cabecera de sus enlaces sin necesitar una
   linea ni mas tamano, que en un pie oscuro pesa demasiado. */
.kr-pie-titulo {
  margin: 0 0 .8rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(245, 249, 247, .75);
}
.kr-pie-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.kr-pie-lista a {
  color: rgba(237, 242, 239, .85); text-decoration: none; font-size: .92rem;
  transition: color .15s ease;
}
.kr-pie-lista a:hover { color: #fff; }

.kr-pie-fila {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(237, 242, 239, .12);
}
.kr-pie-redes { display: flex; gap: .75rem; }
.kr-pie-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(237, 242, 239, .12); color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.kr-pie-redes a:hover { background: var(--salvia); transform: translateY(-2px); }
.kr-pie-redes svg { width: 18px; height: 18px; fill: currentColor; }

.kr-pie-apps { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
/* El rotulo delante: sin el, dos insignias sin enlace parecen botones rotos. */
.kr-pie-apps-texto { font-size: .78rem; color: rgba(237, 242, 239, .55); }
.kr-pie-insignia { height: 38px; width: auto; display: block; border-radius: 6px; opacity: .9; }


.kr-pie-abajo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.25rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: 1.25rem 0;
  border-top: 1px solid rgba(237, 242, 239, .12);
  font-size: .82rem; color: rgba(237, 242, 239, .6);
}
.kr-pie-legal { display: flex; gap: 1rem; flex-wrap: wrap; }
.kr-pie-legal a { color: rgba(237, 242, 239, .7); text-decoration: none; transition: color .15s ease; }
.kr-pie-legal a:hover { color: #fff; }

@media (max-width: 1024px) {
  .kr-pie-rejilla { grid-template-columns: 1fr; text-align: center; }
  .kr-pie-marca { align-items: center; }
  .kr-pie-lema { max-width: none; }
  .kr-pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr-pie-redes { justify-content: center; }
  .kr-pie-abajo { flex-direction: column; text-align: center; }
}
@media (max-width: 640px) {
  .kr-pie-columnas { grid-template-columns: 1fr; gap: 1.75rem; }
  .kr-pie-fila { flex-direction: column; }
  .kr-pie-apps { justify-content: center; }
  /* El rotulo en su propia linea: con el al lado, las dos insignias no caben
     en 390px y Google Play se quedaba sola debajo, descolgada. */
  .kr-pie-apps-texto { width: 100%; text-align: center; }
}

@media (max-width: 768px) {
  .kr-nav { display: none; }
  .kr-btn-negocio { display: none; }
}

/* Confirmación de reserva: nota y acciones finales */
.kr-wizard-ok-nota { margin: 1rem 0 1.25rem; font-size: .875rem; color: #6b7280; }
.kr-wizard-ok-acciones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.kr-btn-ghost { border-color: #e5e7eb; color: #6b7280; }
.kr-btn-ghost:hover { background: #f9fafb; color: #374151; border-color: #d1d5db; }

/* Inicial del profesional cuando aún no tiene foto */
.kr-equipo-inicial {
  display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--salvia); color: #fff;
  font-size: 1.75rem; font-weight: 700;
}

/* ── Galería: miniatura con contador de fotos restantes ── */
.kr-galeria-thumb { position: relative; overflow: hidden; border-radius: 10px; }
.kr-galeria-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kr-galeria-thumb.con-mas img { filter: brightness(.55); }
.kr-galeria-mas {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 1.5rem; font-weight: 700; pointer-events: none;
}

/* ── Visor a pantalla completa ── */
/* ── Galeria completa, en mosaico ────────────────────────────────────────────
   «Ver todas las fotos» abria el visor en la primera y habia que pasarlas de
   una en una; con treinta, encontrar una era un pase de diapositivas. Aqui
   salen todas y se amplia la que interese.

   z-index POR DEBAJO del visor (1000): desde aqui se abre el visor, y tiene
   que quedar encima. */
/* LA CAJA NO SE MUEVE; SOLO SE MUEVEN LAS FOTOS.

   Antes rodaba el modal entero: con treinta fotos el titulo y las pestañas se
   iban arriba y para cambiar de grupo habia que volver a subir del todo.
   Ademas, al cambiar de pestaña la caja crecia o menguaba de golpe segun
   cuantas fotos tuviera el otro grupo, y eso era el salto.

   Ahora la caja mide siempre lo mismo —hasta 92vh— y quien rueda es la rejilla
   de dentro: la cabecera se queda quieta y las pestañas estan siempre a mano. */
.kr-galmodal {
  position: fixed; inset: 0; z-index: 990;
  background: rgba(15, 23, 20, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 1rem;
}
.kr-galmodal[hidden] { display: none; }
.kr-galmodal-caja {
  /* Estrecho a proposito. A 860px la foto ancha salia de 800px y, para no
     comerse la pantalla de alto, habia que recortarla a una tira. Con la caja
     mas angosta cabe entera y el conjunto queda en un rectangulo de proporcion
     normal, que es como se miran las galerias. */
  position: relative; width: 100%; max-width: 660px;
  max-height: 92vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; padding: 1.6rem 1.6rem 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
.kr-galmodal-x {
  position: absolute; top: .9rem; right: 1rem;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--borde); background: #fff;
  font-size: 1.3rem; line-height: 1; color: var(--gris); cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.kr-galmodal-x:hover { border-color: var(--salvia); color: var(--tinta); }

/* Quieta arriba: no encoge cuando la rejilla pide sitio. */
.kr-galmodal-cab { margin-bottom: 1.2rem; flex-shrink: 0; }
.kr-galmodal-cab h2 {
  font-size: 1.35rem; font-weight: var(--peso-titulo);
  color: var(--tinta); letter-spacing: -.02em;
}
.kr-galmodal-cab p { color: var(--gris); font-size: .88rem; margin-top: .15rem; }

/* Pastillas, no subrayados: aqui no se navega, se filtra. La activa en verde
   macizo para que se vea cual manda de un vistazo. */
.kr-galmodal-tabs { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.kr-galmodal-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 100px;
  border: 1px solid var(--borde); background: #fff;
  color: var(--gris); font-family: inherit; font-size: .85rem;
  font-weight: var(--peso-dato); cursor: pointer;
  transition: all .18s ease;
}
.kr-galmodal-tab b { font-weight: 700; opacity: .65; font-variant-numeric: tabular-nums; }
.kr-galmodal-tab:hover { border-color: var(--salvia); color: var(--tinta); }
.kr-galmodal-tab.activa {
  background: var(--salvia); border-color: var(--salvia); color: #fff;
}
.kr-galmodal-tab.activa b { opacity: .8; }

/* EL MOSAICO: dos pequeñas al lado y debajo una a todo el ancho, en vueltas
   de tres. Dos columnas y la ancha ocupando las dos, asi que cada fila cuadra
   sola y no hay huecos.

   Las proporciones las pone el CSS y no la foto: `cover` recorta lo que sobra
   por el lado largo. Se probo al reves —calculando el alto de cada una por su
   proporcion real, sin recortar nada— y la rejilla salia agujereada, porque un
   alto cualquiera casi nunca encaja con el de al lado. Un patron que se repite
   se ve intencionado; unos huecos, roto. Quien quiera la foto entera la amplia,
   que para eso esta el visor.

   El reparto (`i % 3 === 2` es la ancha) lo hace el JS de la ficha: si se
   cambia aqui el numero de columnas, hay que cambiarlo alli tambien. */
.kr-galmodal-mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  /* Lo unico que rueda. `min-height: 0` es obligatorio: sin el, un hijo flexible
     no baja de su alto natural y la rejilla desbordaria la caja en vez de
     llevar su propia barra. El hueco de la derecha deja sitio a esa barra para
     que no se monte encima de las fotos. */
  overflow-y: auto; flex: 1; min-height: 0;
  padding-right: .4rem; padding-bottom: .6rem;
  overscroll-behavior: contain;
  /* LAS DOS LINEAS SON OBLIGATORIAS desde que la caja tiene alto fijo y esto
     rueda por dentro.

     Con el alto ya decidido, la rejilla repartia ESE alto entre sus cuatro
     filas —155,8px cada una— en vez de dar a cada una lo que pedia su
     contenido, que eran 297. La foto desbordaba su celda, `overflow: hidden` la
     recortaba y todas se veian pegadas pese al `gap: 10px`: medido, las
     separaciones salian NEGATIVAS.
     `max-content` es lo que rompe ese reparto; `start` evita ademas que las
     filas se estiren cuando sobra sitio. */
  grid-auto-rows: max-content;
  align-content: start;
}
.kr-galmodal-foto {
  margin: 0; position: relative;
  border-radius: 12px; overflow: hidden; cursor: zoom-in;
  background: var(--salvia-50);
}
/* La ancha: las dos columnas. */
.kr-galmodal-foto.ancha { grid-column: span 2; }

/* LA PROPORCION VA EN LA IMAGEN, NO EN LA FIGURA.
   Puesta en la figura, la rejilla no la tiene en cuenta al medir las filas: las
   calculaba a 156px mientras las fotos ocupaban 297, asi que cada una
   desbordaba su celda y se montaba sobre la de abajo. Las separaciones salian
   NEGATIVAS —de ahi que se vieran pegadas pese al `gap: 10px`— y no se
   arreglaba sacando la imagen del flujo, porque el problema no era el alto de
   la imagen sino que la fila no sabia cuanto medir.
   En la imagen, que va en flujo, la figura mide lo que ella y la fila tambien. */
.kr-galmodal-foto img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
/* LA ANCHA SE VE ENTERA: su proporcion es la de la foto, no una impuesta.
   Forzada a 16/9 y recortada con `cover`, de una foto vertical solo se veia una
   tira del centro —una franja de techo— que no dice nada del salon. Es la foto
   grande de la fila: si hay una que tiene que verse completa, es esa.
   Las pequeñas si se recortan a 4/3, que van en pareja y tienen que casar de
   alto; ahi el recorte es leve y se amplia para verla entera. */
.kr-galmodal-foto.ancha img { aspect-ratio: auto; height: auto; }
.kr-galmodal-foto:hover img { transform: scale(1.04); }
/* De quien es el trabajo, sobre un degradado: encima de una foto clara el
   texto blanco a secas no se lee. */
.kr-galmodal-foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .55rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .68));
  color: #fff; font-size: .78rem; font-weight: var(--peso-dato);
}

@media (max-width: 700px) {
  .kr-galmodal-caja { padding: 1.2rem 1rem 1.6rem; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-galmodal-foto img, .kr-galmodal-foto:hover img { transition: none; transform: none; }
}

.kr-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center;
}
.kr-lightbox[hidden] { display: none; }
.kr-lb-figura { margin: 0; max-width: 92vw; max-height: 88vh; }
.kr-lb-figura img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain; border-radius: 6px; display: block;
}
.kr-lb-cerrar, .kr-lb-nav {
  position: absolute; background: rgba(255, 255, 255, .12); border: 0;
  color: #fff; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; transition: background .15s;
}
.kr-lb-cerrar:hover, .kr-lb-nav:hover { background: rgba(255, 255, 255, .28); }
.kr-lb-cerrar { top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 1.75rem; line-height: 1; }
.kr-lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; line-height: 1; }
.kr-lb-prev { left: 1rem; }
.kr-lb-next { right: 1rem; }
.kr-lb-contador {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .85); font-size: .875rem;
  background: rgba(0, 0, 0, .5); padding: .3rem .8rem; border-radius: 999px;
}
@media (max-width: 640px) {
  .kr-lb-nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .kr-lb-prev { left: .4rem; }
  .kr-lb-next { right: .4rem; }
}

/* Reseñas: estado vacío y respuesta del negocio */
.kr-resenas-vacio { color: #6b7280; font-size: .925rem; padding: .5rem 0; }
.kr-resena-respuesta {
  margin-top: .75rem; padding: .7rem .9rem;
  background: #f7f6f2; border-radius: 8px; font-size: .875rem;
}
.kr-resena-respuesta strong { display: block; margin-bottom: .2rem; color: var(--salvia-dark); }
.kr-resena-respuesta p { margin: 0; color: #4b5563; }

/* ── Mapa del listado (Leaflet) ── */
#kr-mapa-canvas {
  width: 100%; height: 70vh; min-height: 420px;
  border-radius: 12px; border: 1px solid #e5e5e5;
  z-index: 0; /* por debajo de la cabecera fija */
}
.kr-mapa-aviso {
  margin: .6rem 0 0; font-size: .8125rem; color: #6b7280;
}

/* Marcador propio: el azul de Leaflet se confunde con los iconos del mapa */
.kr-marcador {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--salvia-dark, #3F6154);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: transform .12s;
}
.kr-marcador.destacado { background: var(--dorado, #C9A227); }
.kr-marcador-wrap:hover .kr-marcador { transform: scale(1.25); }

/* Ficha emergente al pulsar un marcador */
.kr-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; }
.kr-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.kr-pop { display: block; text-decoration: none; color: inherit; }
.kr-pop img { width: 100%; height: 110px; object-fit: cover; display: block; }
.kr-pop-body { display: block; padding: .6rem .75rem .7rem; }
.kr-pop-body strong { display: block; font-size: .9375rem; margin-bottom: .1rem; }
.kr-pop-dir { display: block; font-size: .75rem; color: #6b7280; margin-bottom: .4rem; }
.kr-pop-meta { display: flex; gap: .5rem; align-items: center; }
.kr-pop-nota {
  font-size: .75rem; font-weight: 700; color: #fff;
  background: var(--salvia-dark, #3F6154); padding: .1rem .4rem; border-radius: 4px;
}
.kr-pop-nota.sin { background: #9ca3af; font-weight: 500; }
.kr-pop-precio { font-size: .75rem; color: #4b5563; }

/* Mapa de la ficha */
/* El mapa de la ficha es un <iframe> de la Maps Embed API. `display:block` y
   `border` propios porque un iframe va en linea por defecto: deja unos pixeles
   de hueco debajo y se dibuja con el marco del navegador. */
.kr-mapa-mini {
  display: block; width: 100%; height: 260px;
  border: 1px solid #e5e5e5; border-radius: 12px; z-index: 0;
}

/* OJO CON EL NOMBRE: `kr-mapa-caja` ya es la caja del modal del buscador, y
   usarla aqui heredaba su `display:flex` y su alto completo.

   El mapa de la ficha es una ESTAMPA de donde cae el salon: no lleva a ningun
   sitio —no habia buen destino, ver el comentario de la vista— y lo que se
   quiere hacer despues tiene su enlace «Como llegar» justo debajo.

   La tapa se queda aunque no enlace: sin ella el iframe se arrastra, se le
   hace zoom y los negocios de alrededor abren su globito dentro del
   recuadro. */
.kr-mapa-sitio { position: relative; }
.kr-mapa-tapa {
  position: absolute; inset: 0; z-index: 2;
  border-radius: 12px;
  /* Sin puntero ni velo al pasar: no es pulsable y no debe parecerlo. */
  cursor: default;
}
.kr-mapa-dir { margin: .6rem 0 0; font-size: .875rem; color: #6b7280; }

/* ── Cuenta de cliente ── */
.kr-cuenta { display: grid; place-items: center; padding: 3rem 1.5rem; min-height: 60vh; }
.kr-cuenta-card {
  width: 100%; max-width: 26rem; background: #fff;
  border: 1px solid #e5e5e5; border-radius: 14px; padding: 2rem;
}
.kr-cuenta-card h1 { font-size: 1.4rem; margin: 0 0 .4rem; }
.kr-cuenta-sub { color: #6b7280; font-size: .9rem; margin: 0 0 1rem; line-height: 1.5; }
.kr-cuenta-nota {
  font-size: .8125rem; color: #6b7280; background: #f7f6f2;
  padding: .6rem .8rem; border-radius: 8px; margin: 0 0 1.25rem;
}
.kr-campo { margin-bottom: 1rem; }
.kr-campo label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .3rem; }
.kr-campo input {
  width: 100%; padding: .6rem .75rem; font-size: .9375rem;
  border: 1px solid #d1d5db; border-radius: 8px;
}
.kr-campo input:focus { outline: none; border-color: var(--salvia); }
.kr-campo-ayuda { display: block; font-size: .75rem; color: #9ca3af; margin-top: .25rem; }
.kr-cuenta-error { color: #dc2626; font-size: .8125rem; margin: 0 0 .75rem; }
.kr-cuenta-cambiar { text-align: center; font-size: .875rem; margin: 1.25rem 0 0; color: #6b7280; }
.kr-cuenta-cambiar a { color: var(--salvia-dark); font-weight: 600; }

/* ── Mis citas ── */
.kr-miscitas { padding: 2.5rem 1.5rem 4rem; max-width: 52rem; }
.kr-miscitas-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.kr-miscitas-head h1 { margin: 0 0 .2rem; font-size: 1.6rem; }
.kr-miscitas-sub { color: #6b7280; margin: 0; font-size: .9rem; }
.kr-miscitas-titulo { font-size: 1rem; margin: 1.75rem 0 .75rem; color: #374151; }
.kr-miscitas-vacio { text-align: center; color: #6b7280; padding: 3rem 0; }
.kr-miscitas-vacio .kr-btn-reservar { display: inline-block; margin-top: 1rem; }

.kr-cita {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  border: 1px solid #e5e5e5; border-radius: 12px;
  padding: .9rem 1.1rem; margin-bottom: .6rem; background: #fff;
}
.kr-cita.pasada { opacity: .75; }
.kr-cita-fecha {
  display: flex; flex-direction: column; min-width: 8.5rem;
  border-right: 1px solid #eee; padding-right: 1rem;
}
.kr-cita-dia { font-size: .8125rem; color: #6b7280; text-transform: capitalize; }
.kr-cita-hora { font-size: 1.25rem; font-weight: 700; color: var(--salvia-dark); }
.kr-cita-cuerpo { flex: 1; min-width: 12rem; display: flex; flex-direction: column; gap: .15rem; }
.kr-cita-serv { font-size: .875rem; color: #374151; }
.kr-cita-meta { font-size: .75rem; color: #9ca3af; }
.kr-cita-lado { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.kr-cita-estado {
  font-size: .7rem; font-weight: 700; padding: .15rem .5rem;
  border-radius: 999px; background: #f3f4f6; color: #4b5563;
}
.kr-cita-estado.e-confirmada { background: #e8f0ec; color: var(--salvia-dark); }
.kr-cita-estado.e-cancelada, .kr-cita-estado.e-no_show { background: #fee2e2; color: #b91c1c; }
.kr-cita-accion { font-size: .8125rem; font-weight: 600; color: var(--salvia-dark); }

/* ── Páginas de texto (legales, sobre, contacto) ── */
.kr-pagina { max-width: 46rem; padding: 2rem 1.5rem 4rem; }
.kr-pagina-cuerpo h1 { font-size: 1.75rem; margin: .5rem 0 .3rem; }
.kr-pagina-fecha { color: #9ca3af; font-size: .8125rem; margin: 0 0 2rem; }
.kr-pagina-cuerpo h2 { font-size: 1.0625rem; margin: 2rem 0 .6rem; color: var(--salvia-dark); }
.kr-pagina-cuerpo p { line-height: 1.7; color: #374151; margin: 0 0 1rem; }
.kr-pagina-cuerpo ul { line-height: 1.7; color: #374151; padding-left: 1.2rem; margin: 0 0 1rem; }
.kr-pagina-cuerpo li { margin-bottom: .4rem; }
.kr-pagina-cuerpo a { color: var(--salvia-dark); text-decoration: underline; }
.kr-pagina-destacado {
  font-size: 1.0625rem; background: #f7f6f2; padding: 1rem 1.2rem;
  border-radius: 10px; margin-bottom: 1.5rem !important;
}
.kr-tabla { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .875rem; }
.kr-tabla th, .kr-tabla td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid #eee; }
.kr-tabla th { background: #f9fafb; font-weight: 600; }

/* ── Landing para negocios ── */
.kr-negocios-lp { padding: 3rem 1.5rem 4rem; max-width: 60rem; }
.kr-lp-hero { text-align: center; margin-bottom: 4rem; }
.kr-lp-hero h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 0 0 .8rem; }
.kr-lp-sub { color: #6b7280; font-size: 1.0625rem; line-height: 1.6; max-width: 34rem; margin: 0 auto 1.5rem; }
.kr-lp-sub-centrado { color: #6b7280; text-align: center; max-width: 34rem; margin: 0 auto 2rem; }
.kr-lp-cta { display: inline-block; padding: .8rem 2rem; }
.kr-lp-nota { font-size: .875rem; color: #6b7280; margin-top: .8rem; }
.kr-lp-bloque { margin-bottom: 4rem; }
.kr-lp-bloque h2 { text-align: center; font-size: 1.5rem; margin: 0 0 1.5rem; }
.kr-lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.kr-lp-item { border: 1px solid #e5e5e5; border-radius: 12px; padding: 1.25rem; }
.kr-lp-item h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--salvia-dark); }
.kr-lp-item p { margin: 0; color: #6b7280; font-size: .9rem; line-height: 1.6; }

.kr-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.kr-plan {
  position: relative; border: 1px solid #e5e5e5; border-radius: 14px;
  padding: 1.75rem 1.5rem; background: #fff; display: flex; flex-direction: column;
}
.kr-plan.popular { border-color: var(--salvia); box-shadow: 0 4px 20px rgba(92, 130, 113, .12); }
.kr-plan-etiqueta {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: var(--salvia); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .2rem .7rem; border-radius: 999px; white-space: nowrap;
}
.kr-plan h3 { margin: 0 0 .5rem; font-size: 1.0625rem; }
.kr-plan-precio { margin-bottom: .5rem; }
.kr-plan-precio strong { font-size: 2rem; }
.kr-plan-precio span { color: #9ca3af; font-size: .9rem; }
.kr-plan-sub { color: #6b7280; font-size: .875rem; margin: 0 0 1.25rem; line-height: 1.5; min-height: 2.6rem; }
.kr-plan-lista { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.kr-plan-lista li {
  font-size: .875rem; color: #374151; padding: .35rem 0 .35rem 1.4rem;
  position: relative; line-height: 1.4;
}
.kr-plan-lista li::before {
  content: "✓"; position: absolute; left: 0; color: var(--salvia); font-weight: 700;
}
.kr-plan-btn {
  display: block; text-align: center; padding: .65rem 1rem; border-radius: 8px;
  border: 1.5px solid var(--salvia); color: var(--salvia-dark);
  font-weight: 600; font-size: .9rem; transition: .15s;
}
.kr-plan-btn:hover { background: var(--salvia); color: #fff; }
.kr-plan-btn.primario { background: var(--salvia); color: #fff; }
.kr-plan-btn.primario:hover { background: var(--salvia-dark); }
.kr-lp-final { text-align: center; }
.kr-lp-final p { color: #6b7280; max-width: 32rem; margin: 0 auto 1.5rem; line-height: 1.6; }

/* ── Menú móvil ──
   Debajo de 768 px la navegación se oculta; sin este botón no había forma de
   llegar al listado salvo por el buscador de la portada. */
.kr-menu-btn {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; margin-left: auto;
  flex-direction: column; gap: 4px;
}
.kr-menu-btn span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--tinta); transition: transform .2s, opacity .2s;
}
.kr-menu-btn.abierto span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.kr-menu-btn.abierto span:nth-child(2) { opacity: 0; }
.kr-menu-btn.abierto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.kr-menu-movil {
  display: none; flex-direction: column;
  border-top: 1px solid var(--borde); background: #fff;
}
.kr-menu-movil[hidden] { display: none; }
.kr-menu-movil a {
  padding: .9rem 1.25rem; font-weight: 500; color: var(--tinta);
  border-bottom: 1px solid var(--borde);
}
.kr-menu-movil a:last-child { border-bottom: 0; }
.kr-menu-movil a.destacado { color: var(--salvia-dark); font-weight: 600; }

@media (max-width: 768px) {
  .kr-menu-btn { display: flex; }
  .kr-menu-movil:not([hidden]) { display: flex; }
  /* El acceso a la cuenta vive en el desplegable, para no apretar la barra */
  .kr-header-actions .kr-link-login { display: none; }
}

/* Descripción del servicio: el peso baja del nombre al texto, para que se lea
   la jerarquía sin leer las palabras */
.kr-serv-desc {
  display: block; font-size: .8125rem; color: #6b7280;
  line-height: 1.5; margin: .15rem 0 .1rem; max-width: 46ch;
}

/* Horario de hoy destacado: es el dato que se busca, no la semana entera */
.kr-horario-hoy {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .9rem; border-radius: 10px; background: var(--salvia-50);
  border: 1px solid var(--salvia-100); margin-bottom: .6rem;
}
.kr-horario-hoy.cerrado { background: #f9fafb; border-color: var(--borde); }
.kr-hoy-etiqueta {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris);
}
.kr-hoy-horas { font-size: 1.0625rem; font-weight: 700; color: var(--tinta); }
.kr-hoy-estado {
  margin-left: auto; font-size: .72rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--salvia); color: #fff;
}
.kr-horario-hoy.cerrado .kr-hoy-estado { background: #9ca3af; }
.kr-horario-resto summary {
  cursor: pointer; font-size: .85rem; color: var(--salvia-dark);
  font-weight: 600; padding: .3rem 0;
}
.kr-horario-resto[open] summary { margin-bottom: .4rem; }

/* Redes sociales del negocio */
.kr-redes { display: flex; gap: .5rem; margin-top: .2rem; }
.kr-redes a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--borde); border-radius: 8px; color: var(--tinta);
  transition: border-color .15s, color .15s;
}
.kr-redes a:hover { border-color: var(--salvia); color: var(--salvia-dark); }
/* Sin tamano explicito el SVG colapsa a 0 y el enlace queda como un recuadro
   vacio: parece un fallo de maquetacion. */
.kr-redes a svg { width: 17px; height: 17px; }

/* ── Carrusel de la portada ──
   Con diez negocios, una rejilla ocupa media pantalla y obliga a bajar antes de
   ver el resto de la página. */
.kr-section-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: var(--aire-md);
}
.kr-section-cab h2 { margin-bottom: 0; }
/* El subtitulo gris se retiro de la portada.
   Decia cosas que la fila ya dice: bajo «Recomendados» ponia «Los mejor
   valorados de Andorra», y bajo «Explora por parroquia», «Negocios en cada
   parroquia de Andorra». Cuatro explicaciones seguidas de algo que se entiende
   solo es justo lo que hace que una pagina parezca rellenada. La clase se
   queda por si alguna fila futura si necesita aclararse. */
.kr-section-sub {
  margin-top: .2rem; color: var(--gris);
  font-size: var(--t-sm); font-weight: var(--peso-texto);
}
.kr-section-cab-der { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.kr-ver-todos {
  font-size: var(--t-sm); font-weight: var(--peso-dato); color: var(--salvia-dark);
  white-space: nowrap;
}
.kr-ver-todos:hover { text-decoration: underline; }
@media (max-width: 640px) {
  /* Las flechas no se usan con el dedo y en movil se comen el titulo */
  .kr-section-cab-der .kr-carrusel-nav { display: none; }
  /* En pantallas de 320 px, "Novedades cerca de ti" y "Ver todos" no caben en
     el mismo renglon y el enlace se salia por la derecha. La cabecera pasa a
     dos filas y el titulo puede partir. */
  .kr-section-cab { flex-wrap: wrap; align-items: flex-start; }
  .kr-section-cab-txt { min-width: 0; flex: 1 1 100%; }
  .kr-section-cab-der { margin-left: auto; }
}

/* ===== Flechas del carrusel =====
   ESTABAN ARRIBA A LA DERECHA, en la cabecera, a 34 px y con borde gris claro:
   dos circulitos que nadie veia porque estan lejos de lo que mueven. Ahora van
   FLOTANDO SOBRE EL PROPIO CARRUSEL, a la altura de las fotos, que es donde la
   mano las busca y donde las pone cualquiera que haga esto bien.

   Solo aparecen al pasar el raton por encima: quietas y siempre visibles,
   tapan un trozo de la primera y la ultima tarjeta sin que nadie se lo haya
   pedido. En movil no existen, que ahi se desliza con el dedo. */
.kr-carrusel-nav {
  position: absolute; inset: 0;
  pointer-events: none;
}
.kr-carr-btn {
  position: absolute;
  /* 40% y no 50%: la mitad de la caja cae ya en el texto de la tarjeta, y la
     flecha tiene que quedar sobre la foto. Funciona para las dos alturas
     —tarjeta de negocio y azulejo de categoria— sin una regla por cada una. */
  top: 40%;
  transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--borde); background: #fff; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--tinta);
  display: grid; place-items: center;
  box-shadow: var(--sombra-carta);
  pointer-events: auto;
  opacity: 0;
  transition: opacity .18s, border-color .15s, color .15s, transform .15s;
}
.kr-carr-btn[data-dir="-1"] { left: -12px; }
.kr-carr-btn[data-dir="1"]  { right: 12px; }
.kr-carrusel-wrap:hover .kr-carr-btn,
.kr-carr-btn:focus-visible { opacity: 1; }
.kr-carr-btn:hover:not(:disabled) { border-color: var(--salvia); color: var(--salvia-dark); }
.kr-carr-btn:disabled { opacity: 0 !important; cursor: default; }

.kr-carrusel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 280px;
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  /* La ultima tarjeta asoma por el borde derecho para que se vea que la fila
     sigue. Sin este hueco quedaba partida justo por el marco del contenedor y
     parecia un fallo de maquetacion, no un carrusel. */
  padding-right: 2.5rem;
  scroll-padding-left: .1rem;
  /* La barra molesta más de lo que ayuda: se navega con las flechas o el dedo */
  scrollbar-width: none;
}
.kr-carrusel::-webkit-scrollbar { display: none; }
/* Se desvanece por la derecha: refuerza que hay mas y suaviza el corte */
.kr-carrusel-wrap { position: relative; }
.kr-carrusel-wrap::after {
  content: ''; position: absolute; top: 0; bottom: .5rem; right: -1px; width: 3.5rem;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--fondo) 82%);
}
.kr-carrusel > .kr-card { scroll-snap-align: start; }

/* Los azulejos son mas estrechos que una tarjeta de negocio: caben seis en
   pantalla y la fila se lee de un vistazo. */
.kr-carrusel--azulejos { grid-auto-columns: 164px; }
.kr-carrusel--azulejos > .kr-azulejo { scroll-snap-align: start; }
@media (max-width: 640px) {
  /* Tres y pico por pantalla: con 33vw cabian tres justas y la cuarta no
     asomaba, asi que no se veia que la fila seguia.

     SELECTOR DOBLE a proposito: mas abajo `.kr-carrusel` pone 78vw para los
     carruseles de negocio, misma especificidad y mas tarde en el fichero, asi
     que ganaba y las categorias salian a pantalla completa —una foto enorme
     por categoria, justo lo contrario de lo que se buscaba—. */
  .kr-carrusel.kr-carrusel--azulejos { grid-auto-columns: 29vw; }
  .kr-carrusel--azulejos .kr-azulejo-txt strong { font-size: .8125rem; }
}

@media (max-width: 640px) {
  .kr-carrusel { grid-auto-columns: 78vw; }
  .kr-carrusel-nav { display: none; }  /* en móvil se desliza con el dedo */
}

/* Hueco de foto ausente, sin estilos en línea */
.kr-card-sinfoto {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--salvia); background: var(--salvia-50);
}
.kr-card-sinfoto i { width: 32px; height: 32px; }

/* ── Paginador del listado ── */
.kr-paginador {
  display: flex; gap: .35rem; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: 2rem 0 .5rem;
}
.kr-pag-btn, .kr-pag-num {
  min-width: 34px; height: 34px; padding: 0 .7rem;
  border: 1px solid var(--borde); background: #fff; border-radius: 8px;
  font-size: .85rem; font-weight: 500; color: var(--tinta); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.kr-pag-num { padding: 0; font-variant-numeric: tabular-nums; }
.kr-pag-btn:hover:not(:disabled), .kr-pag-num:hover:not(.activa) {
  border-color: var(--salvia); color: var(--salvia-dark);
}
.kr-pag-btn:disabled { opacity: .35; cursor: default; }
.kr-pag-num.activa {
  background: var(--salvia); border-color: var(--salvia);
  color: #fff; font-weight: 700;
}

/* El mapa pedía más presencia: borde más marcado y esquinas más suaves */
#kr-mapa-canvas {
  border: 2px solid var(--salvia-100);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(18, 33, 28, .06);
}

/* ── Selector de idioma ── */
.kr-lang { position: relative; }
.kr-lang-btn {
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: var(--t-xs); font-weight: var(--peso-dato);
  letter-spacing: .04em; color: var(--gris); padding: .3rem .5rem;
  border-radius: var(--radius-sm); transition: color var(--transicion), border-color var(--transicion);
}
.kr-lang-btn:hover { color: var(--tinta); border-color: var(--borde); }

.kr-lang-menu {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
  margin: 0; padding: .3rem; list-style: none; min-width: 9rem;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radius-sm); box-shadow: var(--sombra-carta);
}
.kr-lang-menu[hidden] { display: none; }
.kr-lang-menu a {
  display: block; padding: .45rem .6rem; border-radius: 6px;
  font-size: var(--t-sm); color: var(--tinta); white-space: nowrap;
  transition: background var(--transicion);
}
.kr-lang-menu a:hover { background: var(--fondo-hundido); }
.kr-lang-menu a.activo { color: var(--salvia-dark); font-weight: var(--peso-dato); }

/* Aqui estaban las pestañas «el local / trabajos» de la PORTADA de la ficha.
   Se han ido: lo primero que ve alguien de un salon no puede ser una pregunta,
   y quien acaba de entrar todavia no sabe que hay dentro como para elegir.
   Arriba salen las fotos sin mas; separarlas por tipo es cosa del modal de la
   galeria completa (`.kr-galmodal-tab`), para quien ya ha decidido verlas
   todas. */

/* --- Días con hueco en el calendario del wizard ---
   La marca verde bajo el número dice de un vistazo qué días sirven. Sin ella
   hay que ir tocando día por día: un festivo, unas vacaciones y un día lleno se
   ven exactamente igual que uno libre. */
.kr-wizard-dia.con-hueco {
  position: relative;
}

.kr-wizard-dia.con-hueco::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--salvia);
}

/* Los días sin hueco quedan atenuados pero PULSABLES: al tocarlos explican por
   qué (cerrado, completo), y eso informa más que un botón apagado sin motivo. */
.kr-wizard-dia.sin-hueco {
  opacity: .45;
}

.kr-wizard-dia.sin-hueco:hover {
  opacity: .7;
}

/* La marca sobra cuando el día ya está elegido: el fondo lo deja claro. */
.kr-wizard-dia.sel.con-hueco::after {
  background: #fff;
}

/* --- Aviso del salón antes de confirmar ---
   "Trae el DNI", "no tomes el sol 15 días antes". No bloquea la reserva: el
   consentimiento de un tatuaje o un láser se firma en el local igualmente. Lo
   que evita es el viaje en balde. */
.kr-wizard-aviso {
  margin-bottom: var(--aire-md);
  padding: var(--aire-sm) var(--aire-md);
  background: var(--oro-50);
  border-left: 3px solid var(--oro);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
}

/* --- Perfil de cliente --------------------------------------------------- */
.kr-perfil { max-width: 640px; padding-top: var(--aire-xl); padding-bottom: var(--aire-2xl); }

.kr-perfil-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aire-md);
  flex-wrap: wrap;
  margin-bottom: var(--aire-lg);
}
.kr-perfil-head h1 { font-size: var(--t-xl); font-weight: var(--peso-titulo); margin: 0; }

.kr-perfil-cargando { color: var(--gris); }

.kr-perfil-bloque {
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: var(--aire-md);
  margin-bottom: var(--aire-md);
  background: var(--fondo);
}
.kr-perfil-bloque h2 {
  font-size: var(--t-md);
  font-weight: var(--peso-titulo);
  margin: 0 0 var(--aire-md);
}

/* El email se muestra pero no se edita: es la llave de la cuenta y de la
   recuperación. Se pinta como dato, no como campo, para que se vea que no es
   editable antes de intentar escribir en él. */
.kr-campo-fijo .kr-perfil-email {
  margin: 0;
  padding: .7rem .9rem;
  background: var(--fondo-hundido);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radius-sm);
  color: var(--tinta-2);
  font-size: var(--t-sm);
}

.kr-perfil-nota {
  font-size: var(--t-sm);
  color: var(--tinta-2);
  line-height: 1.55;
  margin: 0 0 var(--aire-md);
}

/* La baja va en rojo y con su propio borde: es lo único de esta página que no
   tiene vuelta atrás, y debe verse distinto antes de leerlo. */
.kr-perfil-peligro { border-color: #E8C9C9; }
.kr-perfil-peligro h2 { color: #8C2F2F; }
.kr-perfil-aviso { color: #8C2F2F; font-weight: var(--peso-dato); }

.kr-btn-peligro {
  padding: .75rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid #8C2F2F;
  background: transparent;
  color: #8C2F2F;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--peso-dato);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.kr-btn-peligro:hover { background: #8C2F2F; color: #fff; }
.kr-btn-peligro:focus-visible { outline: 2px solid #8C2F2F; outline-offset: 2px; }

.kr-perfil-acciones { display: flex; gap: var(--aire-sm); flex-wrap: wrap; }

.kr-cuenta-ok {
  color: var(--salvia);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  margin: 0 0 var(--aire-sm);
}

.kr-miscitas-acciones { display: flex; gap: var(--aire-sm); flex-wrap: wrap; }

/* ══ PARROQUIAS ════════════════════════════════════════════════════════════
   Fichas de texto y no azulejos con foto: las imagenes eran paisaje de Andorra,
   decoracion que no dice nada del negocio, y sumaban siete a una portada que ya
   iba cargada. Lo util es el nombre y cuantos negocios hay. */
/* Siete columnas en pantalla ancha: con `auto-fit` cabian seis y Canillo caia
   solo en una segunda fila, que se lee como si sobrara. */
/* ===== Parroquias =====
   ETIQUETAS, NO FICHAS.

   Eran siete cajas con borde y un contador dentro, en rejilla de siete
   columnas. A un septimo del ancho no cabia «Sant Julia de Loria» junto al
   numero, asi que iban en dos renglones y la rejilla quedaba escalonada: la
   seccion se leia como una tabla a medio llenar.

   Son siete nombres. Como etiquetas caben en dos lineas, se leen de un vistazo
   y dejan de competir con las tarjetas. El contador se fue con ellas: «4
   negocios» debajo de una parroquia resta mas de lo que suma mientras el
   directorio sea pequeno, y el numero real ya esta en el buscador. */
.kr-parroquies {
  display: flex; flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--aire-md);
}
.kr-parroquia {
  display: inline-flex; align-items: center;
  padding: .55rem 1rem;
  border: 1px solid rgba(18, 33, 28, .14);
  border-radius: 999px;
  background: var(--fondo);
  font-size: var(--t-sm); font-weight: var(--peso-dato); color: var(--tinta);
  white-space: nowrap;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.kr-parroquia:hover {
  border-color: var(--salvia);
  background: var(--salvia-50);
  color: var(--salvia-dark);
}
/* ══ DESCARGA LA APP ═══════════════════════════════════════════════════════
   Dos columnas: el argumento a la izquierda y las capturas reales de la app a
   la derecha. Es el unico sitio de la portada donde vuelve a haber imagen
   grande, y por eso funciona: viene despues de dos secciones de texto. */
.kr-app {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  /* EN VERDE DE MARCA, no en gris claro.
     El gris lo dejaba como un anuncio incrustado en la pagina: mismo color de
     fondo que cualquier caja del sitio y con el unico contenido que no es un
     negocio. En oscuro se lee como lo que es —un alto en el recorrido— y de
     paso da el unico respiro de color de toda la portada. */
  background: linear-gradient(150deg, #17342A 0%, var(--tinta) 68%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  /* 5.5rem dejaba un palmo en blanco justo antes, mas del doble que entre
     cualquier otro par de secciones. Al mismo ritmo que las demas. */
  margin-top: var(--aire-lg);
}
/* Estaba a 36 px, o sea el titulo mas grande de la pagina despues del hero,
   en el bloque menos importante de todos. */
.kr-app h2 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.kr-app p { color: rgba(255,255,255,.76); margin-top: var(--aire-sm); max-width: 34ch; }
.kr-app li, .kr-app-puntos li { color: rgba(255,255,255,.88); }
.kr-app i { color: var(--salvia-200); }
.kr-app-botons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--aire-md); }
.kr-app-boton {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.2rem;
  /* Sobre fondo oscuro, el negro de antes desaparecia: los botones de tienda
     eran dos rectangulos invisibles. */
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  font-size: var(--t-sm); font-weight: var(--peso-dato);
  transition: background var(--transicion), transform var(--transicion);
}
.kr-app-boton:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }

/* Los dos moviles encabalgados, como en el hero de la landing. */
.kr-app-fotos { position: relative; display: flex; justify-content: center; }
.kr-app-mobil {
  border-radius: 26px; padding: 8px;
  background: linear-gradient(160deg, #2A3A34 0%, #12211C 46%, #253530 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), var(--sombra-alta);
}
.kr-app-mobil img { width: 100%; height: auto; display: block; border-radius: 20px; }
.kr-app-mobil--a { width: 56%; transform: rotate(2deg); z-index: 2; }
.kr-app-mobil--b { position: absolute; left: 4%; bottom: 4%; width: 46%; transform: rotate(-4deg); z-index: 1; }

@media (max-width: 860px) {
  .kr-app { grid-template-columns: 1fr; text-align: center; }
  .kr-app p, .kr-app-botons { margin-inline: auto; justify-content: center; }
  .kr-app-fotos { max-width: 380px; margin-inline: auto; }
}
@media (max-width: 560px) {
  /* Un solo movil: dos encabalgados en pantalla estrecha se tapan. */
  .kr-app-mobil--a { width: 78%; transform: none; }
  .kr-app-mobil--b { display: none; }
}

/* Insignias de las tiendas. Sin enlace mientras las apps no esten publicadas,
   asi que van en gris suave: a plena opacidad prometen un boton que no lleva a
   ningun sitio. */
.kr-app-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--aire-md); align-items: center; }
/* Esquinas redondeadas: la insignia oficial viene con el rectangulo recto y
   junto al resto de la pagina —tarjetas y botones a 8-14px— canta. */
.kr-app-badge { height: 44px; width: auto; opacity: .38; filter: grayscale(1); border-radius: 7px; }
.kr-app-pronto {
  margin-top: .6rem; font-size: var(--t-xs); color: var(--gris);
  font-weight: var(--peso-dato); letter-spacing: .01em;
}

/* ══ CABECERA: BOTONES ═════════════════════════════════════════════════════ */
.kr-header-actions { display: flex; align-items: center; gap: 1.25rem; }
.kr-nav { display: flex; align-items: center; gap: 1.25rem; }

/* El idioma con globo terraqueo, como en cualquier web internacional: el codigo
   de dos letras solo no se reconoce como selector. */
.kr-lang-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .6rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--t-sm); font-weight: var(--peso-medio);
  color: var(--gris);
  transition: color var(--transicion);
}
.kr-lang-btn:hover { color: var(--tinta); }
.kr-link-registro { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--tinta); }
.kr-link-registro:hover { color: var(--salvia); }

/* Boton oscuro y no verde: el verde ya lo lleva el CTA de negocios, y dos
   botones de color en la misma barra compiten. */
.kr-btn-entrar {
  padding: .55rem 1.15rem;
  background: var(--tinta); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--t-sm); font-weight: var(--peso-dato);
  cursor: pointer;
  transition: background var(--transicion), transform var(--transicion);
}
.kr-btn-entrar:hover { background: #000; transform: translateY(-1px); }

/* ══ MODALES ═══════════════════════════════════════════════════════════════ */
/* `display:grid` gana al `[hidden]` del navegador, asi que el modal cerrado
   seguia ocupando la pantalla entera y su fondo interceptaba TODOS los clics:
   la web quedaba muerta. El `[hidden]` explicito lo apaga de verdad. */
.kr-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.25rem; }
.kr-modal[hidden] { display: none; }
.kr-modal-fondo { position: absolute; inset: 0; background: rgba(18, 33, 28, .55); }
.kr-modal-caja {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  background: var(--fondo);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-alta);
  padding: 1.75rem;
}
.kr-modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kr-modal-cab h2 { font-size: var(--t-lg); font-weight: var(--peso-titulo); }
.kr-modal-x, .kr-modal-atras {
  position: absolute; top: 1rem;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: none; cursor: pointer;
  color: var(--gris); font-size: 1.1rem; line-height: 1;
  border-radius: 50%;
  transition: background var(--transicion), color var(--transicion);
}
.kr-modal-x { right: 1rem; }
.kr-modal-atras { left: 1rem; font-size: 1.6rem; }
.kr-modal-x:hover, .kr-modal-atras:hover { background: var(--fondo-hundido); color: var(--tinta); }
.kr-modal-cab .kr-modal-x { position: static; }

/* ── Modal de idioma ─────────────────────────────────────────────────────── */
.kr-modal-cuerpo { margin-top: var(--aire-md); }
.kr-lang-actual {
  padding: .9rem 1rem; background: var(--fondo-hundido);
  border-radius: var(--radius); margin-bottom: var(--aire-md);
}
.kr-lang-actual span { display: block; font-size: var(--t-xs); color: var(--gris); }
.kr-lang-actual strong { font-size: var(--t-sm); font-weight: var(--peso-dato); }
.kr-lang-reixa { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.kr-lang-op {
  padding: .8rem .9rem;
  border: 1px solid rgba(18, 33, 28, .14);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  transition: border-color var(--transicion), background var(--transicion);
}
.kr-lang-op:hover { border-color: var(--salvia-200); background: var(--salvia-50); }
.kr-lang-op.activo { border-color: var(--tinta); font-weight: var(--peso-dato); }

/* ── Modal de acceso ─────────────────────────────────────────────────────── */
.kr-auth { text-align: center; }
.kr-auth-cab { margin-bottom: var(--aire-lg); }
/* La K sola y no el logotipo entero, como en el modal de Tavlo: en una caja
   estrecha la marca completa se come el ancho y compite con el titular.
   Cuadrada, asi que manda el alto. */
.kr-auth-logo { height: 46px; width: auto; margin: .25rem auto var(--aire-sm); display: block; }
.kr-auth-cab h2 { font-size: var(--t-lg); font-weight: var(--peso-titulo); }

.kr-auth-opcions { display: grid; gap: .6rem; }
.kr-auth-op {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .85rem 1rem;
  background: var(--fondo);
  border: 1px solid rgba(18, 33, 28, .18);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--t-sm); font-weight: var(--peso-dato);
  color: var(--tinta); cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.kr-auth-op:hover { border-color: var(--tinta); background: var(--fondo-hundido); }

.kr-auth-form { text-align: left; display: grid; gap: var(--aire-md); }
.kr-camp { display: grid; gap: .35rem; }
.kr-camp label { font-size: var(--t-xs); font-weight: var(--peso-dato); color: var(--tinta-2); }
.kr-camp input {
  padding: .8rem .9rem;
  border: 1px solid var(--borde); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--t-sm); color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.kr-camp input:focus {
  outline: none; border-color: var(--salvia);
  box-shadow: 0 0 0 3px var(--salvia-50);
}
.kr-auth-oblidada { font-size: var(--t-xs); color: var(--gris); justify-self: start; }
.kr-auth-oblidada:hover { color: var(--salvia); }
.kr-auth-enviar {
  padding: .9rem 1rem;
  background: var(--tinta); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--t-sm); font-weight: var(--peso-dato);
  cursor: pointer;
  transition: background var(--transicion);
}
.kr-auth-enviar:hover { background: #000; }
.kr-auth-enviar:disabled { opacity: .55; cursor: not-allowed; }

/* Separador con el texto encima de la linea, como en Tavlo. */
.kr-auth-separador {
  display: flex; align-items: center; gap: .75rem;
  margin: var(--aire-lg) 0 var(--aire-sm);
  color: var(--gris); font-size: var(--t-xs);
}
.kr-auth-separador::before, .kr-auth-separador::after {
  content: ''; flex: 1; height: 1px; background: var(--borde);
}
.kr-auth-enllac {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--t-sm); font-weight: var(--peso-dato);
  color: var(--salvia); text-decoration: underline; text-underline-offset: 3px;
}
.kr-auth-avis {
  padding: .7rem .85rem; border-radius: var(--radius-sm);
  background: #FBEDED; color: #8C2F2F; border: 1px solid #F0D5D5;
  font-size: var(--t-xs); text-align: left;
}
.kr-auth-avis.ok { background: var(--salvia-50); color: var(--salvia-dark); border-color: var(--salvia-200); }

@media (max-width: 900px) {
  /* La navegacion y el registro pasan al menu de movil; se quedan el idioma y
     el boton de entrar, que son las dos acciones. */
  .kr-header-actions .kr-nav, .kr-link-registro { display: none; }
}

/* Mismo motivo que en .kr-modal: cada pantalla del modal es flex/grid y el
   `hidden` del navegador no la apagaria. */
.kr-modal-caja[hidden] { display: none; }

/* «Crea tu cuenta» es un <button> para abrir el modal, pero debe leerse como
   enlace: sin el borde ni el fondo que el navegador le pone por defecto. */
button.kr-link-registro {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit;
}

/* ══ REJILLA DE RESULTADOS ═════════════════════════════════════════════════
   TRES COLUMNAS, Y LA MISMA TARJETA QUE LA PORTADA.

   Estuvo en una sola columna con la tarjeta girada en horizontal, y cada
   resultado traia la carta de precios entera: tres servicios con duracion,
   importe y su propio boton verde. En una pantalla salian TREINTA Y SEIS
   botones «Reservar» identicos. El listado dejaba de ser una lista de negocios
   y era doce listas de precios apiladas, todas con la misma pinta, asi que
   nada de lo que se veia ayudaba a elegir salon.

   Ahora es la misma tarjeta vertical de la portada, en rejilla. Se ven nueve
   negocios sin bajar en vez de cuatro, la foto —que es lo que vende un salon—
   manda, y el sitio entero usa una sola tarjeta en vez de dos para lo mismo.

   La rejilla base `.kr-cards` ya hace el trabajo; aqui solo se ajusta el
   ancho minimo de columna para que a 1160px de contenido salgan tres. */
.kr-resultados .kr-cards {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.75rem 1.25rem;
}

/* El precio de partida, debajo de la parroquia.
   En la version de una columna se habia quitado a proposito: «desde 12 €»
   encima de una lista que ensenaba 28 €, 45 € y 32 € se leia como un cebo.
   Sin esa lista ya no contradice a nada, y en un buscador el suelo de precio
   es de las pocas cosas que separan un salon de otro de un vistazo. */
.kr-card-desde {
  margin-top: .15rem;
  font-size: var(--t-sm); color: var(--tinta-2);
  font-weight: var(--peso-dato);
}
.kr-card-desde span { font-weight: var(--peso-texto); color: var(--gris); }


/* Reglas que vivian dentro del bloque de la tarjeta horizontal y que la
   rejilla sigue necesitando: se fueron con el, y sin ellas la nota salia
   partida en dos renglones y los puntos de separacion, pegados al texto. */

/* «Abierto ahora» en verde, sin el circulito de la regla base: en la linea de
   datos ya hay un punto de separacion delante y salian los dos juntos. */
.kr-resultados .kr-card-estado {
  display: inline; margin: 0;
  font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--salvia);
}
.kr-resultados .kr-card-estado::before { content: none; }
.kr-resultados .kr-card-cerrado { color: var(--gris); }

/* Icono y contador del titulo de cada filtro.
    y no : Lucide REEMPLAZA la etiqueta <i> por un <svg>, asi que una regla
   sobre <i> no llega a aplicarse. */
.kr-filtro-group h4 svg {
  width: 18px; height: 18px; color: var(--salvia); stroke-width: 2; flex-shrink: 0;
}
.kr-filtro-n {
  margin-left: auto; padding: 2px 8px;
  background: var(--salvia-50); color: var(--salvia-dark);
  border-radius: 10px; font-size: var(--t-xs); font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
}

/* ══ BOTONES DE FILTRO (precio y valoracion) ══════════════════════════════
   Sustituyen a los dos deslizadores. Un control que hay que arrastrar hasta
   «65 €» no da control fino con treinta y tres negocios: da la sensacion de
   que hay que calibrar algo antes de poder mirar, y nadie sabe donde corta. */
.kr-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.kr-chip {
  border: 1px solid rgba(18, 33, 28, .14);
  background: var(--fondo);
  border-radius: 999px;
  padding: .4rem .85rem;
  font: inherit; font-size: var(--t-sm); font-weight: var(--peso-dato);
  color: var(--tinta-2);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.kr-chip:hover { border-color: var(--salvia); color: var(--salvia-dark); }
/* Marcado: relleno de marca, no solo un borde. Con el borde solo, en una fila
   de cuatro no se distinguia cual estaba puesto sin fijarse. */
.kr-chip.is-on {
  background: var(--salvia-dark); border-color: var(--salvia-dark); color: #fff;
}
.kr-chip:focus-visible { outline: 2px solid var(--salvia); outline-offset: 2px; }

/* ══ MODAL DEL MAPA ════════════════════════════════════════════════════════
   Mapa a la izquierda, lista a la derecha, a pantalla completa. Incrustado en
   la columna de resultados ocupaba media pantalla y hacía desaparecer las
   tarjetas: no había forma de mirar un pin y saber de quién era. */
/* Con margenes, como Tavlo: a sangre parece otra pagina y se pierde de vista
   que hay un listado detras al que se vuelve al cerrar. */
.kr-mapa-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(18, 33, 28, .5);
}
/* 20px por lado, los mismos que Tavlo (`inset:20px`), y SIN `max-width`: el
   mapa aprovecha la pantalla entera menos el marco. Con 2.5rem y tope de
   1500px quedaba una franja gris enorme alrededor en pantallas anchas. */
.kr-mapa-caja {
  position: absolute; inset: 20px;
  display: flex; flex-direction: column;
  background: var(--fondo);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(18, 33, 28, .25);
  overflow: hidden;
}
/* `display:flex` gana al `[hidden]` del navegador, así que sin esto el modal
   cerrado seguiría tapando la página entera. */
.kr-mapa-modal[hidden] { display: none; }

.kr-mapa-cab {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
.kr-mapa-cab h2 { font-size: var(--t-md); font-weight: var(--peso-titulo); }
.kr-mapa-x {
  margin-left: auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: none; border: none; cursor: pointer;
  color: var(--gris); font-size: 1.1rem; border-radius: 50%;
  transition: background var(--transicion), color var(--transicion);
}
.kr-mapa-x:hover { background: var(--fondo-hundido); color: var(--tinta); }

.kr-mapa-cuerpo { flex: 1; display: grid; grid-template-columns: 1fr 350px; min-height: 0; }
/*  en la fila del grid y altura forzada en el lienzo: Google
   fija el alto del div al crear el mapa, y si en ese momento el contenedor aun
   no tiene su tamano definitivo se queda corto —630px en un hueco de 836— y
   deja una banda blanca debajo. */
.kr-mapa-lienzo {
  width: 100%; height: 100% !important; min-height: 0;
  /* A esquina viva: el `overflow:hidden` del modal le redondeaba la esquina de
     abajo y quedaba una muesca contra el borde recto del panel. */
  border-radius: 0;
}
/* Google marca con un recuadro azul el div del mapa al recibir el foco —al
   pulsar un pin, sin ir mas lejos—. Es su estilo por defecto, no una ayuda de
   accesibilidad nuestra: el modal ya se cierra con Escape. */
.kr-mapa-lienzo:focus, .kr-mapa-lienzo *:focus { outline: none !important; }
/* Por ID y con `!important`: Google escribe `#kr-mapa-canvas{border-radius:16px}`
   en su propia hoja al crear el mapa, y una regla de clase no puede con un ID.
   El redondeo dejaba una muesca contra el borde recto del panel de la derecha. */
#kr-mapa-canvas, #kr-mapa-canvas > div { border-radius: 0 !important; }
/* El JS baja la opacidad mientras Google descarga las teselas del zoom nuevo;
   sin transicion el cambio es un parpadeo tan feo como lo que trata de tapar. */
.kr-mapa-lienzo { transition: opacity 220ms ease; }
/* La columna entera: barra fija arriba y lista que desplaza debajo. */
.kr-mapa-col {
  display: grid; grid-template-rows: auto 1fr;
  min-height: 0; border-left: 1px solid var(--borde);
  background: var(--fondo-hundido);
}
.kr-mapa-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .8rem 1rem .2rem;
}
.kr-mapa-barra select {
  max-width: 190px; padding: .45rem .7rem;
  border: 1px solid var(--borde); border-radius: var(--radius-sm);
  background: var(--fondo); color: var(--tinta);
  font-family: inherit; font-size: var(--t-xs); font-weight: var(--peso-dato);
  cursor: pointer;
}
.kr-mapa-lista {
  overflow-y: auto;
  padding: 1rem; background: var(--fondo-hundido);
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  align-content: start;
  /* `min-content` y no `auto`: con `auto` el grid le daba 9px de alto a cada
     tarjeta —una linea de texto— mientras el contenido (foto + datos, 214px)
     se desbordaba invisible. Solo pasa con hijos `<a>` que llevan imagen. */
  grid-auto-rows: min-content;
}

/* ── Tarjetas de la lista lateral ────────────────────────────────────────── */
/* Vertical y a lo ancho de la columna, la misma tarjeta que el listado: en
   Tavlo la lista del mapa reutiliza `.restaurant-card` tal cual, con la foto
   arriba. La miniatura de 72px al lado dejaba la foto en un sello. */
.kr-ml-item {
  display: block;
  background: var(--fondo);
  /* Sin borde gris, como las tarjetas de la portada: el marco gris de cada
     una, repetido 33 veces en una columna estrecha, hacia rejilla. */
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.kr-ml-item:hover { box-shadow: 0 2px 10px rgba(18, 33, 28, .1); }
/* Redondeada SOLO por arriba: abajo la foto encuentra el bloque de texto, y
   redondearla ahi dejaria dos esquinas cortadas en medio de la tarjeta. */
.kr-ml-item img, .kr-ml-sinfoto {
  display: block; width: 100%; height: 130px; object-fit: cover;
  background: var(--salvia-50);
  border-radius: var(--radius) var(--radius) 0 0;
}
.kr-ml-txt { padding: .7rem .8rem .8rem; }
.kr-ml-txt { min-width: 0; }
.kr-ml-txt strong {
  display: block; font-size: var(--t-sm); font-weight: var(--peso-dato);
  color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Solo el tamaño. El color lo pone cada dato —categoria en tinta, estado en
   verde o rojo—: este `color` generico alcanzaba tambien al <span> del estado
   anidado dentro de .kr-ml-cat y lo dejaba gris. */
.kr-ml-txt span { font-size: var(--t-xs); }
.kr-ml-nota { font-size: var(--t-xs); font-weight: 700; color: var(--tinta); white-space: nowrap; }

/* ── Pin de marca ────────────────────────────────────────────────────────── */
/* Misma forma y proporciones que en la app: circulo de 40 con pua corta y la
   nota redonda montada en la esquina (48x56 con el solape). Ver
   `kuraeapp/scripts/generar-pines.js`. */
.kr-pin { position: relative; cursor: pointer; transition: transform 160ms ease; transform-origin: bottom center; }
/* 48x56, la medida REAL de la app: a 34px la nota quedaba en 5px y no habia
   forma de leerla, que es justo el dato por el que se elige salon. */
.kr-pin svg { width: 48px; height: 56px; display: block; overflow: visible; }
/* La gota lleva clase propia: con `path:first-child` la regla alcanzaba
   tambien a la K y al circulo de la nota segun el orden del SVG. */
.kr-pin-gota { fill: var(--salvia); }
/* El elegido pasa a TINTA, no a un verde mas oscuro: a este tamaño sobre un
   mapa, dos verdes solo se distinguen si estan uno al lado del otro. */
.kr-pin-activo .kr-pin-gota { fill: var(--tinta); }
.kr-pin-activo { z-index: 20; }
/* El destacado en dorado: se ve distinto sin salirse de la marca. */
.kr-pin-destacado .kr-pin-gota { fill: var(--oro); }

/* Zoom lejano: un punto, no la gota. Ver 33 gotas a 12px unas encima de otras
   no dice nada; el punto dice donde hay salones, que es lo unico legible ahi. */
.kr-pin-punto {
  display: block; width: 12px; height: 12px;
  border-radius: 50%; background: var(--salvia);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(18, 33, 28, .4);
}
.kr-pin-punto-caja.kr-pin-activo .kr-pin-punto { background: var(--tinta); }
/* Zoom medio: el pin entero, mas pequeño, para que quepan sin pisarse. */
.kr-pin-pequeno svg { width: 32px; height: 37px; }

/* Pin de GRUPO: la misma gota, con el numero dentro en vez de la K. */
.kr-pin-grupo svg { width: 44px; height: 51px; }

@media (max-width: 860px) {
  /* En móvil la lista pasa debajo del mapa: en columna de 380px no cabe, y
     partir la pantalla en dos deja las dos mitades inservibles. */
  .kr-mapa-cuerpo { grid-template-columns: 1fr; grid-template-rows: 55% 45%; }
  .kr-mapa-lista { border-left: none; border-top: 1px solid var(--borde); }
}

/* ── La cita del cliente, desde el enlace del correo ────────────────────── */
/* Se apoya en `.kr-cuenta-card`, que ya centra y da el marco. Aquí solo van
   las piezas propias: la ficha, las horas libres y las estrellas. */

.kr-cita-card { text-align: left; }

.kr-cita-negocio { margin-bottom: 18px; }
.kr-cita-negocio strong { display: block; font-size: 1.05rem; }
.kr-cita-negocio span { color: var(--kr-texto-suave, #6b7280); font-size: .9rem; }

.kr-cita-cuando {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}
.kr-cita-cuando span:first-child { font-size: 1.05rem; text-transform: capitalize; }
.kr-cita-cuando span:last-child { font-size: 1.5rem; font-weight: 600; }

.kr-cita-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .8rem;
    background: #eef2f0;
    margin: 0 0 16px;
}
/* Cancelada y no-show en rojo: son las dos que hay que ver de un vistazo. */
.kr-estado-cancelada,
.kr-estado-no_show { background: #fdeaea; color: #9b2c2c; }
.kr-estado-finalizada { background: #eaf5ee; color: #2f6b45; }

.kr-cita-servicios { list-style: none; padding: 0; margin: 0 0 10px; }
.kr-cita-servicios li { padding: 6px 0; border-bottom: 1px solid #eee; }
.kr-cita-servicios li:last-child { border-bottom: none; }

.kr-cita-total { font-weight: 600; margin: 0 0 6px; }
.kr-cita-con { color: var(--kr-texto-suave, #6b7280); margin: 0 0 18px; }

.kr-cita-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kr-cita-acciones button { flex: 1 1 auto; min-width: 140px; }

/* El motivo por el que no se puede cancelar. En gris y pequeño: informa, no
   alarma —no es un error de la persona—. */
.kr-cita-nota {
    margin-top: 14px;
    font-size: .875rem;
    color: var(--kr-texto-suave, #6b7280);
}

.kr-cita-aviso { margin: 0 0 16px; }

.kr-btn-secundario {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 11px 18px;
    font: inherit;
    cursor: pointer;
}
.kr-btn-secundario:hover { background: #f9fafb; }

.kr-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
    margin-bottom: 12px;
}

/* Las horas libres al reprogramar. Botones anchos: se pulsan con el pulgar. */
.kr-cita-horas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 18px;
}
.kr-hora {
    padding: 10px 14px;
    min-width: 76px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}
.kr-hora:hover { border-color: var(--kr-verde, #1F7A5C); }

.kr-estrellas { display: flex; gap: 4px; margin-bottom: 12px; }
.kr-estrella {
    background: none;
    border: none;
    font-size: 1.9rem;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    padding: 0 2px;
}
.kr-estrella.activa { color: #e0a92a; }

/* Boton «Mapa» de la cabecera: uno solo, no dos pestañas. */
.kr-btn-mapa {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem;
  background: var(--fondo); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--t-sm); font-weight: var(--peso-dato);
  cursor: pointer;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.kr-btn-mapa:hover { border-color: var(--salvia); box-shadow: var(--sombra-suau); }
.kr-btn-mapa i, .kr-btn-mapa svg { width: 17px; height: 17px; }

/* Tarjeta de la lista del mapa: misma informacion que en el listado —categoria
   y estado arriba, ciudad debajo—, que es lo que se compara al mirar el mapa. */
.kr-ml-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
/* La categoria, en tinta como en el listado: en `--tinta-2` se leia mas floja
   que la ciudad de debajo, y es el dato que primero se busca. */
.kr-ml-cat { display: block; font-size: var(--t-xs); color: var(--tinta); margin-top: 2px; }
.kr-ml-ciudad { display: block; font-size: var(--t-xs); color: var(--gris); margin-top: 1px; }
/* Verde abierto, rojo cerrado: los mismos valores que `.kr-card-estado` del
   listado, para que el mismo salon no se lea de dos formas segun la vista. */
.kr-ml-abierto { color: var(--salvia); font-weight: var(--peso-dato); }
.kr-ml-cerrado { color: #8C2F2F; font-weight: var(--peso-dato); }
/* La tarjeta seleccionada lleva una barra verde a la izquierda: con solo el
   fondo claro cuesta encontrarla al desplazarse. */
.kr-ml-item.activo {
  border-color: var(--salvia);
  box-shadow: 0 0 0 2px var(--salvia-50);
}

/* ── Cargando al filtrar ─────────────────────────────────────────────────── */
/* Al marcar una casilla el listado se rehacia de golpe y el salto se leia como
   un parpadeo. Un esqueleto con la FORMA de la tarjeta avisa de que algo se
   esta rehaciendo sin mover el resto de la pagina. */
@keyframes kr-latido { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.kr-sk { background: var(--fondo); border-radius: var(--radius); overflow: hidden; display: flex; gap: 1rem; padding: 0; height: 224px; }
.kr-sk-img { width: 180px; flex-shrink: 0; background: var(--borde); animation: kr-latido 1.5s ease-in-out infinite; }
.kr-sk-txt { flex: 1; padding: 1rem 1rem 1rem 0; display: flex; flex-direction: column; gap: 10px; }
.kr-sk-linea { height: 14px; border-radius: 4px; background: var(--borde); animation: kr-latido 1.5s ease-in-out infinite; }

/* ── Galeria: flechas y contador sobre la foto ────────────────────────────── */
/* Como en Tavlo: se pasan fotos sin abrir el visor, y el contador dice cuantas
   hay. Antes el numero iba encima de la ultima miniatura, tapandola, y no se
   entendia que fuera pulsable. */
.kr-galeria-big { position: relative; }
.kr-gal-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); border: none; cursor: pointer;
  color: var(--tinta); box-shadow: 0 2px 8px rgba(18, 33, 28, .22);
  opacity: 0; transition: opacity var(--transicion), background var(--transicion);
  z-index: 3;
}
/* Aparecen al pasar por encima: con 3 fotos, dos flechas fijas ensucian una
   galeria que casi siempre se mira sin tocar. En tactil no hay hover, asi que
   alli se dejan siempre visibles. */
.kr-galeria:hover .kr-gal-flecha { opacity: 1; }
.kr-gal-flecha:hover { background: #fff; }
.kr-gal-flecha svg { width: 20px; height: 20px; }
.kr-gal-prev { left: 12px; }
.kr-gal-next { right: 12px; }
@media (hover: none) { .kr-gal-flecha { opacity: 1; } }

.kr-gal-todas {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: .45rem .7rem; border: none; border-radius: 8px;
  background: rgba(255, 255, 255, .95); color: var(--tinta);
  font-family: inherit; font-size: .76rem; font-weight: var(--peso-dato);
  cursor: pointer; box-shadow: 0 2px 8px rgba(18, 33, 28, .22);
  white-space: nowrap;
}
.kr-gal-todas:hover { background: #fff; }
.kr-gal-todas svg { width: 14px; height: 14px; flex-shrink: 0; }
.kr-gal-todas b { color: var(--gris); font-weight: 400; }

/* ── Cabecera de la ficha ─────────────────────────────────────────────────── */
/* La nota, grande y alineada a la derecha del titulo, como en la ficha de
   Tavlo. Antes iba en una pastilla verde pegada al nombre y ADEMAS repetida en
   la linea de debajo: el mismo dato dos veces, ninguna de las dos con peso. */
/* ── Cabecera de la ficha ────────────────────────────────────────────────────
   Nombre y «Guardar» en la primera linea; estrellas, nota y opiniones en la
   segunda. La nota iba antes en grande al otro extremo del titulo, con un
   «/10» que ya no es la escala, y el corazon suelto pegado al nombre sin decir
   que hacia.

   No es la barra de Booksy: alli son dos pastillas con borde gris que pesan
   tanto como el nombre del salon. Aqui la accion es un trazo fino que solo se
   rellena al pasar por encima, y la valoracion se apoya en el verde de la casa
   en vez de en el azul de enlace. La informacion es la misma —es la que
   funciona— pero la pagina sigue pareciendo de Kurae. */
.kr-fav-ficha {
  gap: .45rem; flex-shrink: 0;
  padding: .45rem .85rem .45rem .7rem;
  border: 1px solid var(--borde); border-radius: 100px;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.kr-fav-ficha:hover { border-color: var(--salvia); background: var(--salvia-50); }
/* El `scale` del corazon de las tarjetas aqui no: lo que se pulsa es una
   pastilla con texto, y una pastilla que crece al pasar por encima da saltos
   en una linea donde ademas esta el nombre del salon. */
.kr-fav-ficha:hover, .kr-fav-ficha:active { transform: none; }
.kr-fav-texto { font-size: .85rem; font-weight: var(--peso-dato); color: var(--tinta); }

.kr-ficha-valoracion {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .55rem; font-size: .95rem;
}
/* La nota en verde y no en negro: es el dato con el que se decide, y en tinta
   competia con el nombre que tiene justo encima. */
.kr-ficha-valoracion b {
  font-weight: var(--peso-titulo); color: var(--salvia-dark);
  font-variant-numeric: tabular-nums; font-size: 1.05rem;
}
/* El numero de opiniones baja a su seccion. Subrayado fino y a media tinta: se
   ve que es pulsable sin gritarlo como un enlace azul. */
.kr-ficha-valoracion a {
  color: var(--gris); text-decoration: underline;
  text-decoration-color: var(--borde); text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.kr-ficha-valoracion a:hover { color: var(--salvia-dark); text-decoration-color: var(--salvia); }
/* Separador: un punto, no la barra vertical de Booksy. La barra parte la linea
   en dos mitades; el punto solo respira. */
.kr-ficha-valoracion a::before {
  content: '·'; margin-right: .5rem; color: var(--gris-claro);
  display: inline-block; text-decoration: none;
}
.kr-ef-cab { font-size: 1.05rem; }

/* El estado de hoy, con el mismo codigo de color que el listado: verde
   abierto, rojo cerrado. */
.kr-detalle-meta .kr-abierto { color: var(--salvia); font-weight: var(--peso-dato); }
.kr-detalle-meta .kr-abierto i { color: var(--salvia); }
.kr-detalle-meta .kr-cerrado { color: #8C2F2F; font-weight: var(--peso-dato); }
.kr-detalle-meta .kr-cerrado i { color: #8C2F2F; }

/* Los sectores como chip de verdad y no texto suelto: se leen como etiquetas
   de lo que hace el salon, que es lo que son. */
.kr-detalle-chips .kr-chip {
  display: inline-flex; align-items: center;
  padding: .3rem .75rem; border-radius: 100px;
  background: var(--salvia-50); color: var(--salvia-dark);
  font-size: .78rem; font-weight: var(--peso-dato); letter-spacing: .01em;
}

/* ── Valoraciones ─────────────────────────────────────────────────────────── */
/* Circulo grande con la nota, como en la ficha de Tavlo: es lo primero que se
   mira al bajar, y como numero suelto no pesaba nada. */
.kr-nota-circulo {
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  border: 3px solid var(--salvia); background: var(--fondo);
  margin: 0 auto;
}
.kr-nota-circulo b {
  font-size: 2.1rem; font-weight: var(--peso-titulo);
  color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1;
}
.kr-nota-circulo span { font-size: .9rem; color: var(--gris); font-weight: 500; }

/* ── Estrellas con relleno parcial ───────────────────────────────────────────
   Una media de 4,7 no son cuatro estrellas ni cinco. Redondear pinta de
   perfecto a quien no lo es, o al reves, y es justo el dato que la gente mira
   antes de decidir.

   Dos filas identicas superpuestas: la gris debajo y la dorada encima,
   recortada por `width` al porcentaje exacto. Es como lo resuelven Booksy y
   Google, y no necesita medias estrellas dibujadas a mano. */
.kr-estrellas-fijas {
  position: relative; display: inline-block;
  line-height: 1; letter-spacing: 1px; white-space: nowrap;
  /* Sin esto, la fila dorada hereda el tamano del contenedor y las dos capas
     no miden lo mismo: el recorte cae donde no debe. */
  font-size: 1rem;
}
.kr-ef-base { color: #d8d8d2; }
.kr-ef-llena {
  position: absolute; inset: 0 auto 0 0;
  overflow: hidden; color: var(--estrella);
}

/* Bajo la nota grande de la ficha. */
.kr-ef-grandes { font-size: 1.3rem; margin-top: .45rem; }
/* En cada opinion, junto al nombre. */
.kr-ef-resena { font-size: .95rem; margin: .15rem 0; display: block; }

/* Cabecera de cada opinion: avatar a la izquierda, y a su lado el nombre, las
   estrellas y la linea de fecha/servicio/profesional.

   Eran tres columnas con la nota en una capsula a la derecha. Ahora la nota son
   las estrellas, que van con el nombre: un «4» suelto no dice de cuanto es. */
.kr-resena-head {
  display: grid; grid-template-columns: auto 1fr;
  align-items: start; gap: .75rem; margin-bottom: .6rem;
}
.kr-resena-quien { min-width: 0; }
/* Su foto, si la tiene. Mismo circulo que la inicial para que la lista no baile
   segun quien tenga foto. */
.kr-resena-avatar-foto { object-fit: cover; }
/* El profesional en verde: es lo accionable de la linea —a quien pedir hora—,
   y en gris quedaba con el mismo peso que la fecha. */
.kr-resena-prof { color: var(--salvia-dark); font-weight: var(--peso-dato); }
/* Inicial en circulo: sin foto de cliente, da cara propia a cada opinion y
   evita una columna de «Cliente» identicos. */
.kr-resena-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--salvia-50); color: var(--salvia-dark);
  font-weight: 700; font-size: 1rem;
}
.kr-resena-autor { display: block; font-weight: var(--peso-dato); color: var(--tinta); font-size: .92rem; }
.kr-resena-meta { display: block; font-size: .78rem; color: var(--gris); margin-top: 1px; }
/* Capsula SOLIDA: en salvia-50 con texto verde el contraste era tan bajo que
   la nota —el dato de la opinion— se leia peor que la fecha. */
.kr-resena-nota {
  min-width: 38px; padding: .3rem .6rem; border-radius: 100px;
  background: var(--salvia); color: #fff;
  font-weight: 700; font-size: .85rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.kr-resena { border-bottom: 1px solid var(--borde); padding: 1.1rem 0; }

/* Al pasar de pagina se sube aqui. La cabecera es `sticky` y mide 68px, asi
   que sin este margen el titulo «Valoraciones» quedaba justo DEBAJO de ella y
   se perdia. */
#resenas { scroll-margin-top: 84px; }
/* La ultima de la pagina no lleva raya: la separacion va ENTRE opiniones, y en
   la ultima no separa nada —queda una linea suelta justo encima del
   paginador—. La pone el JS, porque `:last-of-type` se fija en la ultima del
   documento y casi nunca es la ultima de la pagina que se esta viendo. */
.kr-resena:last-of-type, .kr-resena-fin { border-bottom: none; }

/* ── Paginador de opiniones ──────────────────────────────────────────────────
   Sustituye al «ver todas», que las soltaba de golpe y dejaba el horario y el
   mapa a dos pantallas. Con paginas, la seccion mide siempre lo mismo y se
   sabe cuantas quedan. */
.kr-resenas-paginas {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.2rem;
}
/* SOLO «Anterior» y «Siguiente»: con `.kr-resenas-paginas button` a secas, esto
   alcanzaba tambien a los numeros y les metia un `inline-flex` sin centrar,
   asi que el digito quedaba pegado a la izquierda —6px a un lado y 19 al
   otro— dentro de su cuadro. */
.kr-resenas-paginas button[data-paso] {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .9rem; border-radius: 100px;
  border: 1px solid var(--borde); background: none;
  font-family: inherit; font-size: .85rem; font-weight: var(--peso-dato);
  color: var(--tinta); cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
/* Solo cambia el trazo y la letra, sin rellenar: un fondo que aparece y
   desaparece al pasar por encima da un parpadeo en toda la fila. */
.kr-resenas-paginas button[data-paso]:hover:not(:disabled) {
  border-color: var(--salvia); color: var(--salvia-dark);
}
/* Apagado y SIN puntero: en la primera o la ultima no hay a donde ir, y un
   boton que se ve pulsable y no hace nada se prueba tres veces. */
.kr-resenas-paginas button:disabled { opacity: .4; cursor: default; }
.kr-resenas-paginas button i, .kr-resenas-paginas button svg { width: 15px; height: 15px; }
/* Los numeros de pagina. Cuadrados y del mismo ancho para que la fila no baile
   al pasar del 9 al 10. */
.kr-resenas-nums { display: flex; align-items: center; gap: .25rem; }
/* `grid` y no el `inline-flex` de al lado: centra el digito en los dos ejes
   sin tener que pensarlo, que es justo lo que fallaba. */
.kr-resenas-nums button {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; border-radius: 9px;
  border: 1px solid transparent; background: none;
  font-family: inherit; font-size: .85rem; color: var(--gris);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
/* Solo el trazo y la letra: rellenar el cuadro al pasar por encima daba un
   parpadeo de color por toda la fila al recorrerla con el raton. */
.kr-resenas-nums button:hover { border-color: var(--salvia); color: var(--salvia-dark); }
/* La actual, con el trazo en tinta y sin relleno. En verde macizo se leia como
   un boton que hay que pulsar, cuando es justo la pagina en la que ya estas.
   El verde se guarda para el hover, que si es una invitacion. */
.kr-resenas-nums button.activa {
  border-color: var(--tinta); color: var(--tinta);
  font-weight: var(--peso-dato); cursor: default;
}
.kr-resenas-hueco { padding: 0 .1rem; color: var(--gris-claro); user-select: none; }

/* En movil, las palabras «Anterior» y «Siguiente» se van: con los numeros en
   medio no caben en 390px, y las flechas ya dicen lo mismo. */
@media (max-width: 560px) {
  .kr-resenas-paginas { gap: .4rem; }
  .kr-resenas-paginas button[data-paso] span { display: none; }
  .kr-resenas-paginas button[data-paso] { padding: .5rem .55rem; }
  .kr-resenas-nums button { min-width: 30px; }
}
.kr-resena-texto { color: #4b5563; line-height: 1.6; font-size: .92rem; }

/* Foco visible pero de la casa: el recuadro negro del navegador sobre un
   boton de texto se lee como un error de maquetacion. Solo con teclado
   (`:focus-visible`), no al pulsar con el raton. */
.kr-ver-todos:focus { outline: none; }
.kr-ver-todos:focus-visible {
  outline: 2px solid var(--salvia);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══ Widget de reserva embebido en la ficha ═══════════════════════════════ */
/* Las cuatro pestanas, como el stepper de Tavlo: la activa y las ya hechas en
   salvia; las pendientes en gris y sin pulsar, porque saltar a «Hora» sin
   servicio dejaria el widget pidiendo huecos de nada. */

/* Opciones: servicio y profesional */

/* Calendario mensual: el mes entero situa el dia en su semana, que es como se
   piensa una cita. Con una tira de 14 dias no hay forma de pedir hora para el
   mes que viene. */
/* Con hueco se marca con un punto bajo el numero, no con color de fondo: el
   fondo lo usa el dia seleccionado y dos rellenos compiten. */

/* Horas: cuatro por fila, que en 460px caben y se leen */

/* ── Paso 1: grupos plegables y buscador ──────────────────────────────────── */
/* Solo con varios grupos: con uno, plegar esconderia el catalogo entero sin
   ganar nada. */

/* El paso 1 no crece sin limite: desplaza por dentro. Sin esto, un grupo de
   nueve servicios estiraba la tarjeta hasta ~1000px y las pestanas quedaban
   fuera de pantalla. Solo cuando hay grupos: con cinco servicios cabe entero. */

/* ═══ Panel lateral del catalogo ═══════════════════════════════════════════ */
/* Copiado del `modal.fixed-right` de Tavlo: entra deslizando desde la derecha
   y mide 470px. Lateral y no centrado: la lista se lee en vertical como una
   carta y la ficha sigue visible al lado. */

/* Lista de servicios dentro del panel */

@media (max-width: 560px) {
  /* A pantalla completa: un panel de 470px en un movil de 390 se sale. */
  .kr-panel-caja { max-width: none; }
}

/* ── Contacto del salon, bajo el widget ───────────────────────────────────── */
/* Tarjeta aparte: el telefono y las redes no son parte del flujo de reservar,
   pero se quieren a mano. Dentro del wizard descuadraban los pasos. */
.kr-contacto-card {
  /* Sin recuadro: debajo de la tarjeta de reservar, un segundo borde gris
     encajonaba la columna y competia con ella. */
  padding: 1.25rem .25rem 0;
  margin-top: .5rem;
}
.kr-contacto-card .kr-reserva-info { margin-top: 0; }

/* ═══ Modal de reserva ═════════════════════════════════════════════════════ */
/* A pantalla completa, al estilo de Fresha. El widget de 460px se quedaba
   corto: no cabian las descripciones, los grupos ni varios servicios a la
   vez, y un catalogo de 30 se leia por una mirilla. */
.kr-modal-reserva {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(18, 33, 28, .5);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.kr-modal-reserva.abierto { opacity: 1; pointer-events: auto; }
.kr-md-caja {
  position: absolute; inset: 0;
  background: var(--fondo-hundido);
  display: flex; flex-direction: column;
  transform: scale(.99);
  transition: transform 200ms ease;
}
.kr-modal-reserva.abierto .kr-md-caja { transform: scale(1); }

/* Cabecera: atras, migas y cerrar */
.kr-md-cab {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.5rem; flex-shrink: 0;
}
.kr-md-redondo {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 50%;
  cursor: pointer; color: var(--tinta);
  transition: border-color var(--transicion), background var(--transicion);
}
.kr-md-redondo:hover { border-color: var(--salvia); }
.kr-md-redondo svg { width: 18px; height: 18px; }
.kr-md-x { margin-left: auto; }

/* Migas: solo se puede volver a un paso ya hecho */
.kr-md-migas { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.kr-md-migas svg { width: 14px; height: 14px; color: var(--gris-claro); }
.kr-md-miga { color: var(--gris-claro); }
.kr-md-miga.hecha { color: var(--tinta); cursor: pointer; }
.kr-md-miga.hecha:hover { text-decoration: underline; }
.kr-md-miga.activa { color: var(--tinta); font-weight: var(--peso-dato); }

/* Dos columnas: lo que se elige y el resumen */
.kr-md-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 400px;
  gap: 2rem; padding: 0 1.5rem 1.5rem;
  max-width: 1400px; width: 100%; margin: 0 auto;
}
.kr-md-principal { overflow-y: auto; padding-right: .5rem; }
.kr-md-principal h2 {
  font-size: 1.9rem; font-weight: var(--peso-titulo);
  color: var(--tinta); margin-bottom: 1.25rem;
}

/* Chips de categoria, como los de Fresha */
.kr-md-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.kr-md-chip {
  padding: .5rem 1rem; border-radius: 100px;
  background: var(--fondo); border: 1px solid var(--borde);
  font-family: inherit; font-size: .85rem; font-weight: var(--peso-dato);
  color: var(--tinta); cursor: pointer; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.kr-md-chip:hover { border-color: var(--salvia); }
.kr-md-chip.activo { background: var(--salvia); border-color: var(--salvia); color: #fff; }

.kr-md-grupo {
  font-size: 1.1rem; font-weight: var(--peso-titulo);
  color: var(--tinta); margin-bottom: .9rem;
}

/* Tarjetas de servicio: toda la caja es pulsable, no solo el «+» */
.kr-md-servicios { display: flex; flex-direction: column; gap: .8rem; }
.kr-md-serv {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.kr-md-serv:hover { border-color: var(--salvia); }
.kr-md-serv.elegido { border-color: var(--salvia); box-shadow: 0 0 0 1px var(--salvia); }
.kr-md-serv-txt { min-width: 0; }
.kr-md-serv-txt b { display: block; font-size: 1rem; font-weight: var(--peso-dato); color: var(--tinta); }
.kr-md-serv-dur { display: block; font-size: .85rem; color: var(--gris); margin-top: .15rem; }
.kr-md-serv-txt p { font-size: .88rem; color: var(--gris); margin: .5rem 0 .6rem; line-height: 1.5; }
.kr-md-serv-precio { font-size: 1rem; font-weight: 700; color: var(--tinta); }
.kr-md-mas {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 50%;
  cursor: pointer; color: var(--tinta);
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.kr-md-mas svg { width: 18px; height: 18px; }
.kr-md-mas.puesto { background: var(--salvia); border-color: var(--salvia); color: #fff; }

/* Profesionales */
.kr-md-profes { display: flex; flex-direction: column; gap: .8rem; }
.kr-md-prof {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
  padding: 1rem 1.25rem;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radius);
  font-family: inherit; cursor: pointer;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.kr-md-prof:hover { border-color: var(--salvia); }
.kr-md-prof.elegido { border-color: var(--salvia); box-shadow: 0 0 0 1px var(--salvia); }
.kr-md-prof b { display: block; font-size: .95rem; font-weight: var(--peso-dato); color: var(--tinta); }
.kr-md-prof div > span { display: block; font-size: .82rem; color: var(--gris); margin-top: 1px; }
.kr-md-avatar {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  object-fit: cover; overflow: hidden;
  background: var(--salvia-50); color: var(--salvia-dark);
  font-weight: 700; font-size: 1.1rem;
  /* Sin esto la caja del texto hereda el interlineado del documento y la
     inicial cae baja dentro del circulo. */
  line-height: 1;
}
.kr-md-avatar svg { width: 20px; height: 20px; }

/* Calendario y horas */
.kr-md-cal { max-width: 460px; margin-bottom: 1.75rem; }
.kr-md-cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.kr-md-cal-cab b { font-size: 1rem; color: var(--tinta); }
.kr-md-cal-cab button {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: none; border-radius: 50%; cursor: pointer; color: var(--tinta);
}
.kr-md-cal-cab button:hover:not(:disabled) { background: var(--fondo-hundido); }
.kr-md-cal-cab button:disabled { opacity: .3; cursor: default; }
.kr-md-cal-cab svg { width: 18px; height: 18px; }
.kr-md-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kr-md-dow { text-align: center; font-size: 11px; color: var(--gris); font-weight: var(--peso-dato); padding-bottom: 6px; }
.kr-md-dia {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
  font-family: inherit; font-size: .9rem; color: var(--tinta); cursor: pointer;
  font-weight: var(--peso-dato);
  transition: border-color var(--transicion), background var(--transicion), opacity var(--transicion);
}
.kr-md-dia:hover:not(:disabled):not(.sin-hueco) { border-color: var(--salvia); }
/* Pasado o sin hueco: apagado. El `title` dice por que, que un boton muerto
   sin motivo hace pensar que la pagina falla. */
.kr-md-dia:disabled { background: none; border-color: transparent; color: var(--gris-claro); cursor: default; }
.kr-md-dia.sin-hueco { background: none; border-color: transparent; color: var(--gris-claro); cursor: not-allowed; }
.kr-md-dia.con-hueco { opacity: 1; }
.kr-md-dia.sel { background: var(--salvia); border-color: var(--salvia); color: #fff; font-weight: 700; }
/* A la espera de /api/disponibilidad/dias: la rejilla se atenua en bloque
   en vez de repintarse dia a dia cuando llega la respuesta. */
.kr-md-cal.cargando .kr-md-dia:not(:disabled) { opacity: .35; cursor: progress; }
.kr-md-cal.cargando .kr-md-cal-cab b::after {
  content: ''; display: inline-block; vertical-align: -2px; margin-left: .5rem;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--borde); border-top-color: var(--salvia);
  animation: kr-gira .7s linear infinite;
}
@keyframes kr-gira { to { transform: rotate(360deg); } }

.kr-md-sub { font-size: 1rem; font-weight: var(--peso-titulo); color: var(--tinta); margin-bottom: .8rem; }
.kr-md-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; max-width: 620px; }
.kr-md-slot {
  padding: .8rem; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); font-family: inherit; font-size: .92rem;
  font-weight: var(--peso-dato); color: var(--tinta); cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.kr-md-slot:hover { border-color: var(--salvia); }
.kr-md-slot.sel { background: var(--salvia); border-color: var(--salvia); color: #fff; }

/* ── El resumen de la derecha ──────────────────────────────────────────── */
.kr-md-lateral {
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0;
  align-self: start; max-height: 100%;
}
#kr-md-resumen { flex: 1; overflow-y: auto; padding: 1.5rem; min-height: 0; }
.kr-md-negocio { display: flex; gap: .9rem; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--borde); }
.kr-md-negocio img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.kr-md-negocio b { display: block; font-size: .95rem; font-weight: var(--peso-dato); color: var(--tinta); }
.kr-md-negocio span { display: block; font-size: .8rem; color: var(--gris); margin-top: 2px; }

.kr-md-cuando { padding: 1rem 0; border-bottom: 1px solid var(--borde); }
.kr-md-cuando p { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--tinta); margin-bottom: .4rem; }
.kr-md-cuando svg { width: 15px; height: 15px; color: var(--gris); flex-shrink: 0; }

.kr-md-vacio { color: var(--gris); font-size: .88rem; padding: 1.25rem 0; }
.kr-md-lineas { padding: 1.25rem 0; display: flex; flex-direction: column; gap: 1rem; }
.kr-md-linea { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.kr-md-linea b { display: block; font-size: .9rem; font-weight: var(--peso-dato); color: var(--tinta); }
.kr-md-linea span { display: block; font-size: .8rem; color: var(--gris); margin-top: 2px; }
.kr-md-linea-der { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.kr-md-linea-der > span { font-size: .9rem; font-weight: var(--peso-dato); color: var(--tinta); margin: 0; }
.kr-md-quitar {
  width: 24px; height: 24px; display: grid; place-items: center;
  background: none; border: none; border-radius: 50%; cursor: pointer; color: var(--gris);
}
.kr-md-quitar:hover { background: var(--fondo-hundido); color: #8C2F2F; }
.kr-md-quitar svg { width: 14px; height: 14px; }

.kr-md-total {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.25rem; border-top: 1px solid var(--borde);
}
.kr-md-total span { font-size: 1rem; font-weight: var(--peso-dato); color: var(--tinta); }
.kr-md-total b { font-size: 1.15rem; font-weight: 700; color: var(--tinta); }

.kr-md-pie { padding: 1.25rem 1.5rem; border-top: 1px solid var(--borde); flex-shrink: 0; }
/* Deshabilitado hasta que hay algo elegido: dejar avanzar y fallar despues
   es peor que decir de entrada que falta un paso. */
.kr-md-seguir {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .95rem; border: none; border-radius: 12px;
  background: var(--salvia); color: #fff;
  font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: background var(--transicion);
}
.kr-md-seguir:hover:not(:disabled) { background: var(--salvia-dark); }
.kr-md-seguir:disabled { background: var(--gris-claro); cursor: not-allowed; }
.kr-md-seguir svg { width: 17px; height: 17px; }
.kr-md-secundario {
  display: block; width: 100%; padding: .9rem; margin-top: .6rem;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px;
  font-family: inherit; font-size: .95rem; font-weight: var(--peso-dato);
  color: var(--tinta); cursor: pointer;
}
.kr-md-secundario:hover { border-color: var(--salvia); }

/* Formulario, avisos y confirmacion */
.kr-md-form { display: flex; flex-direction: column; gap: 1rem; max-width: 520px; }
.kr-md-form label { font-size: .88rem; font-weight: var(--peso-dato); color: var(--tinta); display: flex; flex-direction: column; gap: .4rem; }
.kr-md-form input, .kr-md-form textarea {
  padding: .8rem 1rem; border: 1px solid var(--borde); border-radius: 10px;
  font-family: inherit; font-size: .95rem; background: var(--fondo);
}
.kr-md-form input:focus, .kr-md-form textarea:focus { outline: none; border-color: var(--salvia); }
.kr-md-aviso {
  padding: .9rem 1.1rem; margin-bottom: 1rem;
  background: var(--salvia-50); border-radius: 10px;
  font-size: .88rem; color: var(--salvia-dark);
}
.kr-md-hint { color: var(--gris); font-size: .9rem; padding: 1rem 0; }
.kr-md-login { max-width: 460px; }
.kr-md-login h4 { font-size: 1.1rem; font-weight: var(--peso-titulo); color: var(--tinta); margin-bottom: .5rem; }
.kr-md-login p { font-size: .9rem; color: var(--gris); margin-bottom: 1.25rem; line-height: 1.5; }

.kr-md-ok { text-align: center; max-width: 420px; margin: 3rem auto 0; }
.kr-md-ok-icono {
  width: 64px; height: 64px; margin: 0 auto 1.25rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--salvia); color: #fff;
}
.kr-md-ok-icono svg { width: 30px; height: 30px; }
.kr-md-ok h3 { font-size: 1.4rem; font-weight: var(--peso-titulo); color: var(--tinta); margin-bottom: .5rem; }
.kr-md-ok p { color: var(--gris); margin-bottom: .5rem; }
.kr-md-ok-nota { font-size: .88rem; margin-bottom: 1.5rem; }

@media (max-width: 900px) {
  /* En movil el resumen va abajo, no en columna: 400px de lateral no caben
     y partirlo en dos deja ambas mitades inservibles. */
  .kr-md-grid { grid-template-columns: 1fr; gap: 1rem; overflow-y: auto; }
  .kr-md-principal { overflow: visible; }
  .kr-md-principal h2 { font-size: 1.4rem; }
  .kr-md-lateral { max-height: none; }
  #kr-md-resumen { overflow: visible; }
}

/* El acceso, por encima del modal de reserva. Si no, al pedir sesion desde
   la reserva se abria detras y «Entra en tu cuenta» parecia no hacer nada. */
.kr-modal-reserva.abierto ~ .kr-modal,
body:has(.kr-modal-reserva.abierto) #krAuthModal { z-index: 600; }

/* ══ PANEL DE CUENTA ══════════════════════════════════════════════════════
   Cajon lateral con el menu del usuario, y una «hoja» a su izquierda donde
   sale el contenido de cada seccion. Se abre desde el nombre de la barra.

   z-index 700: por encima del modal de reserva (500) y del de acceso (600),
   porque desde el panel se puede abrir cualquiera de los dos. */
.kr-pu-fondo {
  position: fixed; inset: 0; z-index: 690;
  background: rgba(18, 33, 28, .45);
  opacity: 0; transition: opacity var(--transicion);
}
.kr-pu-fondo.visible { opacity: 1; }
.kr-pu-fondo[hidden] { display: none; }

.kr-pu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 700;
  width: 340px; max-width: 92vw;
  background: var(--fondo);
  box-shadow: var(--sombra-alta);
  padding: 1.5rem 1.25rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transicion);
}
.kr-pu.abierto { transform: none; }
.kr-pu[hidden] { display: none; }

.kr-pu-cerrar {
  position: absolute; top: 1rem; right: 1rem;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--tinta-2); cursor: pointer;
}
.kr-pu-cerrar:hover { background: var(--fondo-hundido); }
.kr-pu-cerrar svg { width: 20px; height: 20px; }

.kr-pu-cab { text-align: center; padding: 1.25rem 0 1.5rem; }
.kr-pu-avatar {
  width: 72px; height: 72px; margin: 0 auto .85rem;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--salvia-50); color: var(--salvia-dark);
  font-weight: 700; font-size: 1.6rem; line-height: 1;
}
.kr-pu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kr-pu-nombre { margin: 0; font-size: 1.05rem; color: var(--tinta); }
.kr-pu-desde { margin: .2rem 0 0; font-size: .82rem; color: var(--gris); }

/* ── Cambiar la foto de perfil ───────────────────────────────────────────────
   La camara pegada al avatar, abajo a la derecha: es donde la busca todo el
   mundo. El margen inferior se mueve del avatar a esta caja, o el boton
   asomaria por debajo y separaria el nombre. */
.kr-pu-avatar-caja {
  position: relative; width: 72px; margin: 0 auto .85rem;
}
.kr-pu-avatar-caja .kr-pu-avatar { margin: 0; }

.kr-pu-avatar-btn {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--salvia); color: #fff;
  /* El aro blanco lo despega de la foto: sobre una imagen clara el circulo
     verde se confundia con el borde del avatar. */
  border: 2px solid #fff;
  transition: background .18s ease, transform .18s ease;
}
.kr-pu-avatar-btn:hover { background: var(--salvia-dark); transform: scale(1.08); }
.kr-pu-avatar-btn i, .kr-pu-avatar-btn svg { width: 13px; height: 13px; }
/* Con el teclado el foco cae en el <input>, que esta escondido: se le pinta a
   la etiqueta, que es lo que se ve. */
#kr-pu-foto:focus-visible + .kr-pu-avatar-btn,
.kr-pu-avatar-btn:focus-visible { outline: 2px solid var(--salvia); outline-offset: 2px; }

/* Mientras sube: la foto ya se ve —se pinta la elegida antes de que conteste
   el servidor— pero apagada, para que se note que aun no esta guardada. */
.kr-pu-avatar-caja.subiendo .kr-pu-avatar { opacity: .55; }

.kr-pu-quitar-foto {
  margin: .5rem auto 0; display: block;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: .78rem; color: var(--gris); text-decoration: underline;
  text-decoration-color: var(--borde); text-underline-offset: 3px;
}
.kr-pu-quitar-foto:hover { color: #b3261e; text-decoration-color: currentColor; }
.kr-pu-foto-avis { margin: .4rem 0 0; font-size: .76rem; color: #b3261e; line-height: 1.35; }

/* ── Encuadrar la foto de perfil ─────────────────────────────────────────────
   Se ve el circulo de verdad y lo que queda fuera, que es lo que deja decidir
   donde cortar. El servidor recorta al centro y no sabe donde esta la cara. */
.kr-recorte {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15, 23, 20, .6);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.kr-recorte[hidden] { display: none; }
.kr-recorte-caja {
  background: #fff; border-radius: 18px; padding: 1.4rem;
  width: 100%; max-width: 340px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.kr-recorte-caja h3 {
  margin: 0 0 1rem; font-size: 1rem; color: var(--tinta); text-align: center;
}

.kr-recorte-lienzo {
  position: relative; width: 100%; aspect-ratio: 1;
  overflow: hidden; border-radius: 12px; background: #111;
  cursor: grab; touch-action: none; user-select: none;
}
.kr-recorte-lienzo:active { cursor: grabbing; }
.kr-recorte-lienzo img {
  position: absolute; top: 50%; left: 50%;
  max-width: none;            /* la regla global de imagenes lo encogeria */
  transform: translate(-50%, -50%);
  pointer-events: none;       /* el arrastre lo escucha el lienzo */
}
/* El agujero redondo. Una sombra enorme hacia dentro pinta todo menos el
   circulo, sin tener que recortar la imagen ni duplicarla. */
.kr-recorte-velo {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(15, 23, 20, .55);
  pointer-events: none;
}

.kr-recorte-zoom {
  display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .2rem;
  color: var(--gris);
}
.kr-recorte-zoom i, .kr-recorte-zoom svg { width: 16px; height: 16px; flex-shrink: 0; }
.kr-recorte-zoom input { flex: 1; accent-color: var(--salvia); }

.kr-recorte-pie { display: flex; gap: .6rem; margin-top: 1rem; }
.kr-recorte-no, .kr-recorte-si {
  flex: 1; padding: .7rem; border-radius: 10px;
  font-family: inherit; font-size: .88rem; font-weight: var(--peso-dato);
  cursor: pointer;
}
.kr-recorte-no { background: none; border: 1px solid var(--borde); color: var(--tinta); }
.kr-recorte-no:hover { border-color: var(--salvia); }
.kr-recorte-si { background: var(--salvia); border: 0; color: #fff; }
.kr-recorte-si:hover { background: var(--salvia-dark); }

/* Solo para lectores de pantalla: el boton es un icono, y sin texto no se
   sabe que hace al navegar a ciegas. */
.kr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.kr-pu-nav { display: flex; flex-direction: column; gap: 2px; }
.kr-pu-item {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .7rem .6rem; border: 0; border-radius: 10px;
  background: none; font-family: inherit; font-size: .92rem;
  color: var(--tinta); text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--transicion);
}
.kr-pu-item:hover { background: var(--fondo-hundido); }
.kr-pu-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--tinta-2); }
.kr-pu-item span { flex: 1; }
/* Activo en salvia: el original marca la seccion abierta en su color de marca,
   y sin eso no se sabe que se esta viendo en la hoja de al lado. */
.kr-pu-item.activo { color: var(--salvia); font-weight: var(--peso-dato); }
.kr-pu-item.activo svg { color: var(--salvia); }

.kr-pu-flecha { transition: transform var(--transicion); }
.kr-pu-cabecera[aria-expanded="true"] .kr-pu-flecha { transform: rotate(180deg); }
.kr-pu-sub { display: flex; flex-direction: column; gap: 2px; }
.kr-pu-sub[hidden] { display: none; }
.kr-pu-subitem { padding-left: 1.6rem; font-size: .89rem; }

.kr-pu-salir { margin-top: .75rem; color: var(--peligro, #B3261E); }
.kr-pu-salir svg { color: currentColor; }

/* ── La hoja de contenido ── */
.kr-pu-hoja {
  position: fixed; top: 0; right: 340px; bottom: 0; z-index: 699;
  width: 480px; max-width: calc(100vw - 340px);
  background: var(--fondo);
  border-right: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column;
  transform: translateX(20px); opacity: 0;
  transition: transform var(--transicion), opacity var(--transicion);
}
.kr-pu-hoja.abierta { transform: none; opacity: 1; }
.kr-pu-hoja[hidden] { display: none; }
.kr-pu-hoja-cab {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--borde);
}
.kr-pu-hoja-cab h2 { flex: 1; margin: 0; font-size: 1.15rem; text-align: center; }
.kr-pu-hoja-cerrar {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; color: var(--tinta-2); cursor: pointer;
}
.kr-pu-hoja-cerrar svg { width: 20px; height: 20px; }
.kr-pu-hoja-cuerpo { flex: 1; overflow-y: auto; padding: 1.5rem; }

/* Fichas de dentro de la hoja: citas, favoritos y opiniones comparten forma. */
.kr-pu-ficha {
  display: flex; gap: .9rem; align-items: center;
  padding: .9rem; margin-bottom: .75rem;
  border: 1px solid var(--borde); border-radius: 14px;
}
.kr-pu-ficha img {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 10px; object-fit: cover; background: var(--fondo-hundido);
}
.kr-pu-ficha-datos { flex: 1; min-width: 0; }
.kr-pu-ficha-datos b { display: block; font-size: .95rem; color: var(--tinta); }
.kr-pu-ficha-datos span { display: block; font-size: .82rem; color: var(--gris); margin-top: 2px; }
.kr-pu-nota { font-size: .88rem; color: var(--gris); }
.kr-pu-etiqueta {
  display: inline-block; padding: .2rem .55rem; border-radius: 999px;
  background: var(--oro-50); color: #7A6110;
  font-size: .74rem; font-weight: var(--peso-dato);
}

/* En movil la hoja ocupa la pantalla: a 400px no caben 340 + 480. */
@media (max-width: 860px) {
  .kr-pu-hoja { right: 0; width: 100%; max-width: 100%; border-right: 0; z-index: 701; }
}

/* Con sesion el boton de la barra deja de ser un boton oscuro con texto y pasa
   a ser el nombre con su avatar: es la puerta al panel de cuenta, no una
   accion. */
.kr-btn-cuenta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; color: var(--tinta);
  padding: .4rem .6rem; border-radius: 999px;
  font-weight: var(--peso-dato);
}
.kr-btn-cuenta:hover { background: var(--fondo-hundido); }
.kr-btn-cuenta-avatar {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--salvia-50) center/cover no-repeat;
  color: var(--salvia-dark); font-size: .78rem; font-weight: 700; line-height: 1;
}

/* ── Contenido de las secciones del panel ── */
.kr-pu-grupo-titulo {
  margin: 1.5rem 0 .75rem; font-size: .95rem; color: var(--tinta);
}
.kr-pu-grupo-titulo:first-child { margin-top: 0; }

/* Sin portada: un hueco con su icono. Una <img> sin origen pinta el simbolo de
   imagen rota, que parece un fallo y no lo es. */
.kr-pu-ficha-hueco {
  width: 64px; height: 64px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px; background: var(--fondo-hundido); color: var(--gris-claro);
}
.kr-pu-ficha-hueco svg { width: 22px; height: 22px; }
.kr-pu-lugar { font-size: .78rem; color: var(--gris-claro); }
a.kr-pu-ficha { text-decoration: none; }
a.kr-pu-ficha:hover { border-color: var(--salvia-200); }

.kr-pu-estado {
  align-self: flex-start; flex-shrink: 0;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: var(--peso-dato); text-transform: uppercase;
  letter-spacing: .02em;
  background: var(--fondo-hundido); color: var(--tinta-2);
}
.kr-pu-estado-confirmada { background: var(--salvia-50); color: var(--salvia-dark); }
.kr-pu-estado-finalizada { background: var(--salvia-50); color: var(--salvia-dark); }
.kr-pu-estado-pendiente { background: var(--oro-50); color: #7A6110; }
.kr-pu-estado-cancelada,
.kr-pu-estado-no_show { background: #FBEAE8; color: #8C2018; }

/* ── Pestanas de opiniones ── */
.kr-pu-pestanas {
  display: flex; gap: .5rem; margin-bottom: 1.25rem;
  background: var(--fondo-hundido); padding: 4px; border-radius: 12px;
}
.kr-pu-pestana {
  flex: 1; padding: .55rem; border: 0; border-radius: 9px;
  background: none; font-family: inherit; font-size: .85rem;
  font-weight: var(--peso-dato); color: var(--tinta-2); cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.kr-pu-pestana.activa { background: var(--fondo); color: var(--tinta); box-shadow: var(--sombra-baja, 0 1px 3px rgba(18,33,28,.10)); }

.kr-pu-valorar {
  flex-shrink: 0; padding: .5rem .9rem; border-radius: 10px;
  background: var(--salvia-50); color: var(--salvia-dark);
  font-size: .82rem; font-weight: var(--peso-dato); text-decoration: none;
}
/* Ahora es un <button> y no un <a>: hay que quitarle el borde y el fondo que
   el navegador le pone por defecto, o sale con marco gris. */
.kr-pu-valorar { border: 0; cursor: pointer; font-family: inherit; }
.kr-pu-valorar:hover { background: var(--salvia-100); }

/* ── Valorar sin salir del panel ─────────────────────────────────────────────
   Colgado de la cita que se esta valorando, no en una pagina aparte: antes
   «Valorar» llevaba a /cita/<token> y volver para seguir mirando las demas
   sacaba del panel entero. */
.kr-pu-pendiente { margin-bottom: .75rem; }
.kr-pu-resena {
  margin: -.35rem 0 0; padding: .85rem;
  border: 1px solid var(--borde); border-top: 0;
  border-radius: 0 0 14px 14px; background: #fff;
}
.kr-pu-resena .kr-estrellas { margin-bottom: .6rem; }
/* Mas pequenas que en la pagina suelta: ahi son el unico contenido y aqui van
   dentro de una lista. */
.kr-pu-resena .kr-estrella { font-size: 1.5rem; padding: 0 .1rem; }
.kr-pu-coment {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: .55rem .7rem; border: 1px solid var(--borde);
  border-radius: 10px; font: inherit; font-size: .85rem;
}
.kr-pu-coment:focus { outline: none; border-color: var(--salvia); }
.kr-pu-resena-pie {
  display: flex; align-items: center; gap: .75rem; margin-top: .6rem;
}
.kr-pu-enviar {
  flex-shrink: 0; padding: .5rem 1.1rem; border: 0; border-radius: 10px;
  background: var(--salvia); color: #fff; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: var(--peso-dato);
}
.kr-pu-enviar:disabled { opacity: .45; cursor: default; }
.kr-pu-enviar:not(:disabled):hover { background: var(--salvia-dark); }
/* Lo que contesta el servidor: «el plazo termino», «esa cita no se ha
   realizado». Son motivos, no fallos tecnicos, y hay que poder leerlos. */
.kr-pu-resena-avis { color: #b3261e; font-size: .78rem; line-height: 1.35; }

.kr-pu-opinion { margin-bottom: 1rem; }
.kr-pu-opinion .kr-pu-ficha { margin-bottom: 0; border-radius: 14px 14px 0 0; border-bottom: 0; }
.kr-pu-nota-num {
  flex-shrink: 0; font-weight: 700; color: var(--tinta); font-size: 1rem;
}
.kr-pu-comentario {
  margin: 0; padding: .9rem;
  border: 1px solid var(--borde); border-top: 0;
  font-size: .88rem; color: var(--tinta-2);
}
.kr-pu-opinion .kr-pu-comentario:last-child { border-radius: 0 0 14px 14px; }
.kr-pu-respuesta {
  padding: .9rem; border: 1px solid var(--borde); border-top: 0;
  border-radius: 0 0 14px 14px; background: var(--fondo-hundido);
}
.kr-pu-respuesta b { display: block; font-size: .8rem; color: var(--salvia-dark); margin-bottom: .25rem; }
.kr-pu-respuesta p { margin: 0; font-size: .86rem; color: var(--tinta-2); }

/* ── Formularios del panel ── */
.kr-pu-form { display: flex; flex-direction: column; gap: .25rem; }
.kr-pu-campo { display: block; margin-bottom: .9rem; }
.kr-pu-campo span { display: block; font-size: .85rem; font-weight: var(--peso-dato); margin-bottom: .35rem; }
.kr-pu-campo input {
  width: 100%; padding: .7rem .85rem;
  border: 1px solid var(--borde); border-radius: 10px;
  font-family: inherit; font-size: .92rem; color: var(--tinta); background: var(--fondo);
}
.kr-pu-campo input:focus { outline: 2px solid var(--salvia-200); outline-offset: 1px; border-color: var(--salvia); }
.kr-pu-campo input:disabled { background: var(--fondo-hundido); color: var(--gris); }
/* PREFIJO Y NUMERO, uno al lado del otro. La etiqueta «Teléfono» va encima de
   los dos, no de cada uno: son un solo dato partido en dos casillas.
   El prefijo no crece —solo caben cuatro— y el numero se queda con el resto. */
.kr-pu-tel { display: grid; grid-template-columns: auto 1fr; gap: .5rem; }
.kr-pu-tel span { grid-column: 1 / -1; }
.kr-pu-prefijo {
  padding: .7rem .5rem;
  border: 1px solid var(--borde); border-radius: 10px;
  font-family: inherit; font-size: .92rem; color: var(--tinta);
  background: var(--fondo); cursor: pointer;
}
.kr-pu-prefijo:focus { outline: 2px solid var(--salvia-200); outline-offset: 1px; border-color: var(--salvia); }

.kr-pu-ayuda { margin: -.6rem 0 1rem; font-size: .78rem; color: var(--gris); }
.kr-pu-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--tinta-2); }
.kr-pu-check input { margin-top: .15rem; accent-color: var(--salvia); }
.kr-pu-guardar {
  margin-top: 1.25rem; padding: .8rem 1.2rem;
  background: var(--salvia); color: #fff; border: 0; border-radius: 10px;
  font-family: inherit; font-size: .92rem; font-weight: var(--peso-dato); cursor: pointer;
}
.kr-pu-guardar:hover:not(:disabled) { background: var(--salvia-dark); }
.kr-pu-guardar:disabled { opacity: .6; cursor: default; }
.kr-pu-aviso {
  margin: .9rem 0 0; padding: .7rem .85rem; border-radius: 10px;
  background: #FBEAE8; color: #8C2018; font-size: .85rem;
}
.kr-pu-aviso.ok { background: var(--salvia-50); color: var(--salvia-dark); }

.kr-pu-baja {
  margin-top: 2.5rem; padding: 1.1rem;
  border: 1px solid #F0C9C4; border-radius: 14px; background: #FEF7F6;
}
.kr-pu-baja h3 { margin: 0 0 .4rem; font-size: .95rem; color: #8C2018; }
.kr-pu-baja p { margin: 0 0 .9rem; font-size: .84rem; color: var(--tinta-2); }
.kr-pu-baja-boton {
  width: 100%; padding: .75rem; border-radius: 10px;
  background: var(--fondo); border: 1px solid #E4A9A2; color: #8C2018;
  font-family: inherit; font-size: .88rem; font-weight: var(--peso-dato); cursor: pointer;
}
.kr-pu-baja-boton:hover { background: #FBEAE8; }

/* El navegador dibuja su propio recuadro de foco al pulsar, y en el panel salia
   un rectangulo negro alrededor del item recien elegido. Se sustituye por el
   subrayado de la marca, y solo para quien navega con el teclado: con raton
   estorbaba sin aportar nada. */
.kr-pu-item:focus { outline: none; }
.kr-pu-item:focus-visible { outline: 2px solid var(--salvia); outline-offset: -2px; }

/* Las fichas de «Mis citas» sin caja: el borde gris alrededor de cada una
   encajonaba la lista y competia con la pastilla de estado. */
.kr-pu-hoja-cuerpo .kr-pu-ficha { border: 0; padding: .9rem .25rem; margin-bottom: 0; }
.kr-pu-hoja-cuerpo .kr-pu-ficha + .kr-pu-ficha { border-top: 1px solid var(--borde); }
/* Las opiniones si las conservan: ahi la caja agrupa nota, comentario y
   respuesta del salon, que son una sola cosa. */
.kr-pu-opinion .kr-pu-ficha { border: 1px solid var(--borde); border-bottom: 0; padding: .9rem; }
.kr-pu-opinion + .kr-pu-opinion .kr-pu-ficha { border-top: 1px solid var(--borde); }

/* Cambiar y anular, bajo cada cita proxima. Llevan a /cita/<token>, la pagina
   de gestion que ya existe: alli estan los huecos reales y el correo de aviso. */
.kr-pu-cita + .kr-pu-cita { border-top: 1px solid var(--borde); }
.kr-pu-cita .kr-pu-ficha { border-top: 0 !important; padding-bottom: .35rem; }
.kr-pu-acciones { display: flex; gap: .5rem; padding: 0 .25rem .9rem 5.15rem; }
.kr-pu-accion {
  padding: .45rem .8rem; border-radius: 9px;
  border: 1px solid var(--borde); background: var(--fondo);
  font-size: .82rem; font-weight: var(--peso-dato);
  color: var(--tinta-2); text-decoration: none;
}
.kr-pu-accion:hover { border-color: var(--salvia); color: var(--salvia); }
.kr-pu-accion-anular { color: #8C2018; }
.kr-pu-accion-anular:hover { border-color: #E4A9A2; color: #8C2018; background: #FEF7F6; }
@media (max-width: 520px) { .kr-pu-acciones { padding-left: .25rem; } }

/* `hidden` es un atributo, no una clase: el navegador lo aplica con una regla
   de su hoja por defecto, que CUALQUIER `display` nuestro derrota. Asi, un
   .kr-btn-reservar con hidden seguia pintandose —al cancelar una cita
   quedaban ofrecidos «Cambiar la hora» y «Valorar mi visita» sobre una cita ya
   muerta—. Se le devuelve la ultima palabra. */
[hidden] { display: none !important; }

/* ── Datos del salon, en la columna derecha ────────────────────────────────
   Donde esta, cuando abre y como llamar. Antes los dos primeros vivian arriba
   a la izquierda y el telefono aqui abajo, asi que la misma pregunta se
   respondia en dos sitios y la columna derecha era un boton con aire. */
.kr-datos-titulo {
  margin: 0 0 .9rem; font-size: .95rem; font-weight: var(--peso-titulo);
  color: var(--tinta);
}
.kr-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.kr-datos li { display: flex; gap: .7rem; align-items: flex-start; }
/* El icono a la altura de la PRIMERA linea, no centrado en el bloque: con dos
   lineas de texto quedaba flotando a media altura. */
/* `svg` ademas de `i`: lucide.createIcons() sustituye cada <i data-lucide>
   por un <svg>, asi que una regla que solo mire al <i> no llega a aplicarse
   nunca y el icono se queda con su tamano por defecto (24px). */
.kr-datos li > i,
.kr-datos li > svg {
  /* Del tamano del texto que acompanan: a 24px pesaban mas que el dato. */
  width: 14px; height: 14px; flex-shrink: 0; margin-top: .2rem;
  color: var(--salvia);
}
.kr-datos li > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kr-datos span, .kr-datos a { font-size: .84rem; color: var(--tinta-2); line-height: 1.45; }
.kr-datos a { color: var(--tinta-2); text-decoration: none; }
.kr-datos a:hover { color: var(--salvia); }
.kr-datos-sub { font-size: .84rem; color: var(--gris); }
/* El prefijo en gris y algo separado: asi «+376 852 407» se lee como un numero
   con su pais, y no como nueve digitos pegados. */
.kr-datos-pref { color: var(--gris); }
.kr-datos-enlace {
  margin-top: .15rem; font-size: .82rem;
  color: var(--salvia) !important; font-weight: var(--peso-dato);
}
.kr-datos-enlace:hover { text-decoration: underline; }
.kr-datos .kr-abierto b { color: var(--salvia); }
.kr-datos .kr-cerrado b { color: #8C2F2F; }
.kr-contacto-card .kr-redes { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--borde); }

/* El titulo y la nota, juntos. `space-between` los mandaba a los dos extremos
   y con un nombre corto quedaba media pantalla vacia entre ellos. */
.kr-detalle-titulo { justify-content: flex-start; gap: 1.25rem; flex-wrap: wrap; }
.kr-detalle-titulo .kr-ficha-nota { text-align: left; }

/* En movil el aside entero se ocultaba, y con el se iban el horario y el
   telefono ahora que viven ahi. La tarjeta de reservar si sobra —abajo hay una
   barra fija con el boton—, pero los datos del salon no: se dejan visibles y
   se colocan despues de la descripcion, antes de los servicios. */
@media (max-width: 900px) {
  /* En movil la columna derecha entera se oculta, y con ella el bloque de
     datos del salon.
     No es un descuido: en una sola columna no hay sitio bueno para el. Al
     final queda pegado al mapa de «Ubicacion», que ya da la direccion; y
     arriba se come las fotos y el nombre del salon, que es lo que identifica
     la pagina. Ademas los tres datos ya viven mas abajo —«Horario» y
     «Ubicacion»—, y el telefono se repite en esa ultima seccion, que sin el
     se quedaba sin ninguna forma de llamar en movil.
     Lo que si hace falta arriba es el boton, y de eso se encarga la barra
     fija de `.kr-reserva-movil`. */
  .kr-reserva-panel { display: none; }
}

/* El telefono de «Ubicacion» solo en movil: en escritorio ya esta en la
   columna derecha y repetirlo dos veces en la misma pantalla sobra. */
.kr-mapa-tel { display: none; }
@media (max-width: 900px) {
  .kr-mapa-tel {
    display: flex; align-items: center; gap: .5rem;
    margin: .5rem 0 0; font-size: .875rem;
  }
  .kr-mapa-tel i { width: 16px; height: 16px; color: var(--salvia); flex-shrink: 0; }
  .kr-mapa-tel a { color: var(--tinta-2); text-decoration: none; }
  .kr-mapa-tel a:hover { color: var(--salvia); }
}

/* Estado y horas en la misma fila. */
.kr-datos li > .kr-datos-linea {
  /* En fila, no en columna: es hija directa del <li> y le llegaba el
     `flex-direction: column` de la regla de al lado, que dejaba el estado
     encima de las horas en vez de al lado. */
  display: flex; flex-direction: row; align-items: baseline;
  gap: .35rem; flex-wrap: wrap; width: 100%;
}
.kr-datos li > .kr-datos-linea > span { display: inline; }

/* La nota, al extremo derecho de su fila: pegada al nombre competia con el,
   y es un dato que se busca aparte. */
.kr-detalle-titulo { justify-content: space-between; }
.kr-detalle-titulo .kr-ficha-nota { text-align: right; margin-left: auto; }

/* El wizard a pantalla completa se comia los bordes: el contenido llegaba a
   tocar los extremos en pantallas anchas. Un respiro a los lados lo compacta
   sin quitarle sitio a la lista de servicios. */
@media (min-width: 1100px) {
  .kr-md-grid { padding-left: 4rem; padding-right: 4rem; }
  .kr-md-cab { padding-left: 4rem; padding-right: 4rem; }
}


/* Avatares del equipo algo mayores: a 72px la cara quedaba pequeña al lado de
   su propio nombre y del texto de al lado. */
.kr-equipo-card { width: 106px; }
.kr-equipo-card img { width: 88px; height: 88px; }
.kr-equipo-inicial { width: 88px; height: 88px; font-size: 1.9rem; }

/* La nota, centrada con su columna. `align-items: center` centra la fila
   entera, pero el circulo y su «3 opiniones» forman un bloque mas corto que el
   desglose de al lado y quedaban descuadrados respecto a el. */
/* El grid vuelve a centrar sus dos columnas: con `start` el circulo de la
   nota se pegaba al borde superior mientras el desglose ocupaba cinco filas. */

/* La ultima seccion no lleva raya: separa de un pie que no existe y deja una
   linea suelta al final de la pagina. */
.kr-detalle-section:last-of-type { border-bottom: 0; }

/* «Ver los N servicios» es un <button>, y `.kr-ver-todos` solo define color y
   tamano: sin fondo ni borde propios el navegador pintaba su boton gris de
   sistema. En el listado no pasaba porque alli es un <a>. */
.kr-ver-todos-bloque {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.1rem; padding: .7rem 1.25rem;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
  font-family: inherit; cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.kr-ver-todos-bloque:hover {
  border-color: var(--salvia); background: var(--salvia-50); text-decoration: none;
}

/* La ultima fila de servicios no lleva raya: con el boton debajo quedaban dos
   lineas seguidas, y sin el, una raya suelta al final de la seccion. */
/* La ultima fila VISIBLE, que no es la ultima del DOM: se ensenan cuatro de
   ocho y el resto van con `hidden`. La marca la pone la vista. */
#servicios .kr-serv-row-ultima { border-bottom: 0; }


/* ── Panel del catalogo de servicios ───────────────────────────────────────
   Entra por la derecha, como la carta de Tavlo. Misma mecanica que el panel
   de cuenta (.kr-pu): fijo, fuera de pantalla y dentro con una clase. */
.kr-panel-fondo {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(18, 33, 28, .45);
  opacity: 0; transition: opacity var(--transicion);
}
.kr-panel-fondo.visible { opacity: 1; }
.kr-panel-fondo[hidden] { display: none; }

.kr-panel-serv {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 410;
  width: 480px; max-width: 94vw;
  background: var(--fondo);
  box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transicion);
}
.kr-panel-serv.abierto { transform: none; }
.kr-panel-serv[hidden] { display: none; }

.kr-panel-serv-cab {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--borde); flex-shrink: 0;
}
.kr-panel-serv-cab h3 { flex: 1; margin: 0; font-size: 1.15rem; color: var(--tinta); }
.kr-panel-serv-x {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--tinta-2); cursor: pointer;
}
.kr-panel-serv-x:hover { background: var(--fondo-hundido); }
.kr-panel-serv-x svg { width: 20px; height: 20px; }

.kr-panel-serv-cuerpo { flex: 1; overflow-y: auto; padding: 0 1.5rem 1.5rem; }
/* La categoria, pegajosa: con un catalogo largo se pierde de vista a que
   grupo pertenece lo que se esta leyendo. */
.kr-panel-serv-grupo {
  position: sticky; top: 0; z-index: 1;
  margin: 0; padding: 1.25rem 0 .6rem;
  background: var(--fondo);
  font-size: .82rem; font-weight: var(--peso-dato);
  text-transform: uppercase; letter-spacing: .04em; color: var(--gris);
}
/* La ultima de cada grupo sin raya: separaba de la cabecera del siguiente. */
.kr-panel-serv-cuerpo .kr-serv-row:last-child { border-bottom: 0; }

@media (max-width: 560px) {
  .kr-panel-serv { width: 100%; max-width: 100%; }
}

/* El logo, algo menor en movil: a 52px quedaba pegado al boton de «Iniciar
   sesion» y la barra se veia apretada en 390px. */
@media (max-width: 640px) {
  .kr-logo-img { height: 28px; }
}