/* ── componentes.css ─────────────────────────────────────────────────────────
   Controles del directorio (conmutador de vista + filtros), tarjetas de la
   vista lista y el diálogo de detalle.
   ───────────────────────────────────────────────────────────────────────── */

/* Barra de controles ------------------------------------------------------ */
.controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.controles__izq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.conmutador {
  position: relative;
  display: inline-flex;
  padding: 4px;
  background: var(--crema-honda);
  border-radius: var(--radio-full);
  flex: 0 0 auto;
}
.conmutador__indicador {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 0; width: 0;
  border-radius: var(--radio-full);
  background: var(--crema-alta);
  box-shadow: var(--sombra-1);
  transition: transform 340ms var(--curva), width 340ms var(--curva);
}
.conmutador button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: var(--radio-full);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinta-suave);
  transition: color var(--transicion);
}
.conmutador button svg { width: 16px; height: 16px; }
.conmutador button[aria-pressed="true"] { color: var(--terracota); }

.conteo { font-size: 13.5px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; }

/* Fila 2: los giros del rubro elegido. Entra desplegándose para que se lea
   como una consecuencia de lo que acabas de tocar, no como algo que ya estaba. */
.filtros--sub {
  margin: -18px 0 30px;
  padding-left: 2px;
  animation: desplegar-filtros 300ms var(--curva) both;
}
@keyframes desplegar-filtros {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.filtro--sub {
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  border-style: dashed;
}
.filtro--sub svg { width: 13px; height: 13px; }
.filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radio-full);
  border: 1.5px solid var(--linea);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
  transition: background-color var(--transicion), border-color var(--transicion),
              color var(--transicion), transform var(--transicion);
}
.filtro svg { width: 15px; height: 15px; }
.filtro:hover { transform: translateY(-1px); border-color: var(--tinta-tenue); color: var(--tinta); }
.filtro[aria-pressed="true"] {
  background: var(--cat-bg, var(--terracota-velo));
  border-color: var(--cat, var(--terracota));
  color: var(--cat, var(--terracota));
}

/* Etiqueta de categoría (compartida) -------------------------------------- */
/* Mezcla el fondo un poco hacia el trazo. Es lo que distingue dos giros del
   mismo rubro sin inventarles un color propio. */
.etiqueta-cat, .tarjeta__icono, .planeta__orbe, .detalle__cima {
  --cat-fondo: color-mix(in oklab, var(--cat-bg), var(--cat) calc(var(--tono, 0) * 6%));
}

.etiqueta-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radio-full);
  background: var(--cat-fondo, var(--cat-bg));
  color: var(--cat);
}

/* Vista lista ------------------------------------------------------------- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 24px 22px;
  text-align: left;
  background: var(--crema-alta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
  animation: entrar-tarjeta 520ms var(--curva) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.tarjeta::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cat);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 300ms var(--curva);
}
.tarjeta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, var(--cat-bg), transparent 60%);
  opacity: 0;
  transition: opacity var(--transicion);
  pointer-events: none;
}
.tarjeta:hover, .tarjeta:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-color: transparent;
}
.tarjeta:hover::before, .tarjeta:focus-visible::before { transform: scaleY(1); }
.tarjeta:hover::after { opacity: .6; }
.tarjeta > * { position: relative; z-index: 1; }

.tarjeta__icono {
  width: 46px; height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--cat-fondo, var(--cat-bg));
  color: var(--cat);
  transition: transform var(--transicion);
}
.tarjeta__icono svg { width: 22px; height: 22px; }
.tarjeta:hover .tarjeta__icono { transform: rotate(-6deg) scale(1.06); }
.tarjeta h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18.5px;
  line-height: 1.2;
  letter-spacing: -0.018em;
}
.tarjeta p { font-size: 13.5px; color: var(--tinta-suave); }
.tarjeta__pie {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cat);
}
.tarjeta__pie svg { width: 13px; height: 13px; transition: transform var(--transicion); }
.tarjeta:hover .tarjeta__pie svg { transform: translateX(3px); }

@keyframes entrar-tarjeta {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.vacio {
  padding: 56px 20px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 14.5px;
}

/* Diálogo de detalle ------------------------------------------------------ */
.detalle {
  width: min(580px, calc(100vw - 28px));
  max-height: min(88vh, 780px);
  /* El reset `* { margin: 0 }` pisa el margin:auto que el navegador le da al
     <dialog> para centrarlo; hay que devolvérselo a mano. */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: clamp(18px, 3vw, 26px);
  background: var(--crema-alta);
  color: var(--tinta);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  opacity: 0;
  scale: .95;
  translate: 0 14px;
  transition: opacity 260ms var(--curva), scale 300ms var(--curva), translate 300ms var(--curva);
}
.detalle.esta-abierto { opacity: 1; scale: 1; translate: 0 0; }
.detalle::backdrop {
  background: rgba(38, 34, 30, .46);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 260ms var(--curva);
}
.detalle.esta-abierto::backdrop { opacity: 1; }

.detalle__marco { display: flex; flex-direction: column; max-height: inherit; }
/* En una columna flexible con alto máximo, TODOS los hijos encogen por defecto:
   así se aplastaba la tira de miniaturas hasta verse cortada. Ahora portada,
   tira y cuerpo viven en un solo contenedor con scroll, y sólo él cede alto. */
.detalle__marco > * { flex-shrink: 0; }
.detalle__desliza { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.detalle__cima {
  position: relative;
  padding: 30px 30px 26px;
  background: linear-gradient(160deg, var(--cat-fondo, var(--cat-bg)) 0%, transparent 120%);
  border-bottom: 1px solid var(--linea-tenue);
}

/* Con foto, la cima se vuelve portada: la imagen manda y el texto se apoya
   en un degradado para seguir siendo legible sobre cualquier fotografía. */
.detalle__cima.tiene-foto {
  padding-top: 168px;
  background: var(--cat-fondo, var(--cat-bg));
  /* Crea contexto de apilamiento propio para poder mandar foto y velo detrás
     del texto con z-index negativo, sin tocar el `position` de los hijos —
     hacerlo rompería el botón de cerrar, que es absolute. */
  isolation: isolate;
}
/* La foto cubre TODA la cima, no una franja: con altura fija dejaba un corte
   seco donde terminaba la imagen. */
.detalle__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.detalle__cima.tiene-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    var(--crema-alta) 0%, rgba(255, 253, 248, .86) 30%, rgba(255, 253, 248, .2) 58%, transparent 80%);
}

.detalle__migas {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 8px;
}
.detalle__cima::before {
  content: '';
  position: absolute;
  right: -40px; top: -70px;
  width: 190px; height: 190px;
  border-radius: 50%;
  border: 1.5px dashed var(--cat);
  opacity: .2;
}
.detalle__emblema {
  width: 58px; height: 58px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  background: var(--crema-alta);
  color: var(--cat);
  box-shadow: var(--sombra-1);
  margin-bottom: 16px;
}
.detalle__emblema svg { width: 28px; height: 28px; }
.detalle h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 10px 0 0;
  position: relative;
}

.detalle__cerrar {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 253, 248, .8);
  color: var(--tinta-suave);
  transition: background-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.detalle__cerrar svg { width: 17px; height: 17px; }
.detalle__cerrar:hover { background: var(--crema-alta); color: var(--tinta); transform: rotate(90deg); }

.detalle__cuerpo { padding: 26px 30px 24px; }
.detalle__texto { font-size: 15px; color: var(--tinta-suave); }

.detalle__seccion { margin-top: 24px; }
.detalle__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 10px;
}
.etiquetas { display: flex; gap: 7px; flex-wrap: wrap; }
.etiqueta {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radio-full);
  border: 1.5px solid var(--cat);
  color: var(--cat);
}

.especialidades { display: flex; gap: 7px; flex-wrap: wrap; }
.especialidad {
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: var(--radio-full);
  background: var(--crema-honda);
  color: var(--tinta);
}

.datos { display: grid; gap: 12px; }
.dato { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; }
.dato svg { width: 17px; height: 17px; color: var(--cat); flex: 0 0 auto; margin-top: 2px; }
.dato span { color: var(--tinta-suave); }
.dato b { font-weight: 600; color: var(--tinta); }
.dato__pendiente { font-style: italic; color: var(--tinta-tenue); }

.aviso {
  margin-top: 22px;
  padding: 13px 15px;
  border-radius: var(--radio-sm);
  background: var(--crema-honda);
  font-size: 12.5px;
  color: var(--tinta-suave);
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.aviso svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--terracota); }

.detalle__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 16px 30px;
  border-top: 1px solid var(--linea-tenue);
  background: var(--crema);
}
.detalle__paso { display: flex; align-items: center; gap: 4px; }
.detalle__paso button {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tinta-suave);
  transition: background-color var(--transicion), color var(--transicion);
}
.detalle__paso button svg { width: 17px; height: 17px; }
.detalle__paso button:hover { background: var(--crema-honda); color: var(--tinta); }
.detalle__posicion { font-size: 12.5px; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; padding-inline: 6px; }

@media (max-width: 520px) {
  .detalle__cima  { padding: 24px 22px 22px; }
  .detalle__cuerpo{ padding: 22px; }
  .detalle__pie   { padding: 14px 16px 14px 22px; }
}

/* Ficha: campos ricos ------------------------------------------------------ */
.detalle__titulos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rango {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--cat);
  opacity: .75;
}

.detalle__texto--pendiente { font-style: italic; color: var(--tinta-tenue); }

/* Miniaturas de la galería */
/* Rejilla que se acomoda en filas: con un scroll lateral la última foto
   quedaba a medias y parecía un carrusel roto. */
.miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 8px;
  padding: 14px 30px 0;
}
.miniatura {
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  overflow: hidden;
  opacity: .55;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: opacity var(--transicion), outline-color var(--transicion);
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { opacity: .85; }
.miniatura.esta-activa { opacity: 1; outline-color: var(--cat); }

/* Carrusel de la portada: flechas a media foto, contador arriba a la izquierda.
   `pan-y` deja el scroll vertical al navegador y el deslizar lateral a nosotros. */
.detalle__cima.tiene-foto { touch-action: pan-y; }
.carrusel__flecha {
  position: absolute;
  top: 66px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 253, 248, .86);
  color: var(--tinta);
  box-shadow: var(--sombra-1);
  transition: background-color var(--transicion), transform var(--transicion);
}
.carrusel__flecha svg { width: 18px; height: 18px; }
.carrusel__flecha:hover { background: var(--crema-alta); transform: scale(1.06); }
.carrusel__flecha--izq { left: 16px; }
.carrusel__flecha--der { right: 16px; }
.carrusel__cuenta {
  position: absolute;
  top: 24px; left: 18px;
  padding: 4px 10px;
  border-radius: var(--radio-full);
  background: rgba(44, 44, 42, .55);
  color: var(--crema-alta);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* La cara del negocio: su logo llena el contenedor y hereda su forma. */
.cara-logo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.planeta__orbe.con-logo, .tarjeta__icono.con-logo, .detalle__emblema.con-logo { background: var(--crema-alta); }
.tarjeta__icono.con-logo, .detalle__emblema.con-logo { overflow: hidden; }
/* El orbe NO recorta: su aro de foco (::after) vive fuera del círculo. El logo se redondea solo. */
.planeta__orbe > .cara-logo { border-radius: 50%; }

/* Botones de acción: WhatsApp, llamar, cómo llegar */
.acciones {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radio-full);
  border: 1.5px solid var(--linea);
  font-size: 13.5px;
  font-weight: 600;
  transition: transform var(--transicion), border-color var(--transicion),
              background-color var(--transicion), color var(--transicion);
}
.accion svg { width: 17px; height: 17px; }
.accion:hover {
  transform: translateY(-2px);
  border-color: var(--cat);
  color: var(--cat);
}
/* WhatsApp lleva su propio verde: es lo que la gente reconoce de un vistazo. */
.accion--wa { background: #E3F3E6; border-color: transparent; color: #1E7B3C; }
.accion--wa:hover { background: #D4EDDA; border-color: transparent; color: #17652F; }

.redes { display: flex; gap: 8px; margin-top: 12px; }
.red {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tinta-suave);
  background: var(--crema-honda);
  transition: color var(--transicion), background-color var(--transicion), transform var(--transicion);
}
.red svg { width: 18px; height: 18px; }
.red:hover { color: var(--cat); background: var(--cat-fondo, var(--cat-bg)); transform: translateY(-2px); }

@media (max-width: 520px) {
  .miniaturas { padding-inline: 22px; }
  .accion { flex: 1 1 auto; justify-content: center; }
}

/* La acción principal vive en el pie: es lo único que no se va con el scroll */
.accion--pie { padding: 11px 20px; }
.detalle__pie .accion--wa { border-color: transparent; }

.corregir { margin-top: 18px; font-size: 12.5px; }
.corregir a { color: var(--tinta-tenue); text-decoration: underline; text-underline-offset: 3px; }
.corregir a:hover { color: var(--terracota); }

/* ── Sorpréndeme (ui/sorpresa.js) ─────────────────────────────────────────── */
.sorpresa { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sorpresa__boton,
.sorpresa__todos {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radio-full);
  font: 600 13.5px/1 var(--texto);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.sorpresa__boton {
  border: 1.5px solid var(--terracota);
  background: var(--terracota-velo);
  color: var(--terracota);
}
.sorpresa__boton:hover { background: var(--terracota); color: var(--crema); }
.sorpresa__boton svg { width: 17px; height: 17px; }
.sorpresa__boton.esta-girando svg { animation: dado 520ms var(--curva); }
.sorpresa__todos {
  border: 1.5px solid var(--linea);
  background: transparent;
  color: var(--tinta-suave);
}
.sorpresa__todos:hover { border-color: var(--tinta-suave); color: var(--tinta); }
@keyframes dado {
  0%   { transform: rotate(0) scale(1); }
  60%  { transform: rotate(250deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sorpresa__boton.esta-girando svg { animation: none; }
}